DEV Community

Cover image for Laravel Vue Router - Tutorial
Lesly Villalobos
Lesly Villalobos

Posted on

Laravel Vue Router - Tutorial

#laravel #vue #tutorial #beginners

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💜

    Top comments (2)

    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.

    Collapse
     
    camohub profile image
    camo •

    The images are too small.