TheLazy.Dev
Portfolio GitHub

Blog

laravel |vue |beginners |tutorial

Laravel Vue Router - Tutorial

lvtdeveloper

Lesly Villalobos

Posted on September 9, 2019

Laravel Vue Router - Tutorial

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💜

    💖 💪 🙅 🚩
    lvtdeveloper
    Lesly Villalobos

    Posted on September 9, 2019

    Join Our Newsletter. No Spam, Only the good stuff.

    Sign up to receive the latest update from our blog.

    Related

    Laravel Vuejs Livewire Tutorials
    laravel Laravel Vuejs Livewire Tutorials

    February 28, 2022

    Laravel Vue Router - Tutorial
    laravel Laravel Vue Router - Tutorial

    September 9, 2019