DEV Community

loading...
Cover image for Laravel Vue Router - Tutorial

Laravel Vue Router - Tutorial

lvtdeveloper profile image Lesly Villalobos ・3 min read

Vue Router is the official router for Vue.js to make building Single Page Applications by allowing you to link URLs to specific components.

Features include:

  • Nested route/view mapping
  • Modular, component-based router configuration
  • Route params, query, wildcards
  • View transition effects powered by Vue.js' transition system
  • Fine-grained navigation control
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

We are going to use vue-router to assign each menu element to the component we want to show. Let's get started!

Setup

Open your terminal and run these commands below:

  • Install the Laravel application (In this case the project's name is "catgallery" You can choose the name that you want):

  • Alt Text
  • Enter to the new directory with the command:

  • Alt Text
  • Install Vue:

  • Alt Text
  • Install npm:

  • Alt Text
  • Install Vue Router:

  • Alt Text

    App.js

    Go to the main JavaScript file resources/assets/js/app.js and update with the code below:

  • Import vue-router:

  • Alt Text
  • Next we tell Vue to use the vue-router plugin:

  • Alt Text
  • Set up the routes (We'll create the components later):

  • Alt Text
  • Create the router instance and pass the routes option:

  • Alt Text
  • To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

  • Alt Text
  • Create and mount the root instance:

  • Alt Text
  • resources/js/app.js

  • Alt Text

    Components

    Create the vue.js components

  • resources/js/components/WelcomeComponent.vue

  • Alt Text
  • resources/js/components/KittenOne.vue

  • Alt Text
  • resources/js/components/KittenTwo.vue

  • Alt Text
  • resources/js/components/KittenThree.vue

  • Alt Text

    View

    Update welcome.blade.php

  • Add style css

  • Alt Text
  • Add id

  • Alt Text
  • Add router-link component for navigation

  • Alt Text
  • Add router-view tag. The router use this tag as a container for rendering the different components tied to the different routes.

  • Alt Text
  • Add js

  • Alt Text
  • resources/views/welcome.blade.php

  • Alt Text

    Styles

    Now add some style public/css/mystyle.css

    Final Steps

    npm run dev
    Alt Text

    Start the app with the command below:
    Alt Text

    It's done =)
    Alt Text

    I hope this example will be of help to you. 🐈
    Be creative and have fun along the way.

    Song while I was writing the post ☺️ https://open.spotify.com/track/4as4XEOR03oGm1STUKl6pa?si=DwWg9bE7Sdmur8OTQ-7ijA

    Thanks for reading!
    Have a nice day, coders💜

    Discussion

    pic
    Editor guide
    Collapse
    albertoapps profile image
    AlbertoApps

    Hola, buscando sobre Vue encontre tu blog, bueno disculpa por poner en spanish es que mi ingles es malo. Bueno me da gusto haber encontrado y espero contactarte pronto. Se me olvidaba soy Alberto espero que aun te acuerdes.