Laravel Vue Router Example From Scratch

By Hardik Savani April 16, 2024 Category : PHP Laravel Vue.JS

Are you looking for create single page app using vue js in laraval then you know how to create router in vue. If you know about npm package then you need to install vue-router for create router in vue.

you can do it with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.

In this example, i will show to create vue router like laravel route we are create. We have to create vue router with component or html template. now we will create home page route and users page route for basic example, so you can understand how we can add more router in vue laravel app.

You have to just follow step by step this tutorial and you will get very nice example and very easily. You can also download and see demo as bellow link. You will have layout like as bellow preview:

Preview:

Step 1 : Install Laravel

Here, we will get fresh Laravel 5.7 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: NPM Configuration

In this step, we have to first add setup of vue js and then install npm, so let's run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Install npm vue vue-router:

npm install vue-router

Read Also: Vue JS Scroll to Element in Div using Vue-scrollto Example

Step 3: Write on app.js and Components

Here, we will write code on app.js and then we will create vue js components, So let's create both file and put bellow code:

resources/assets/js/app.js

    
require('./bootstrap');
   
window.Vue = require('vue');
import VueRouter from 'vue-router'
  
Vue.use(VueRouter)
   
const routes = [
  { path: '/', component: require('./components/ExampleComponent.vue') },
  { path: '/user', component: require('./components/User.vue') }
]
  
const router = new VueRouter({
  routes 
})
  
const app = new Vue({
  router
}).$mount('#app')

resources/assets/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Home Component</div>
  
                    <div class="card-body">
                        Welcome to Homepage
                        <br/>
                        <router-link to="/user">Go to User</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
   
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

resources/assets/js/components/User.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">User Component</div>
  
                    <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        <br/>
                        <router-link to="/">Go to Home</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Step 4: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue Router Message Example From Scratch - ItSolutionStuff.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>Laravel Vue Router Example From Scratch - ItSolutionStuff.com</h1>
        <div id="app">
            <router-view></router-view>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Now you have to run below command for update app.js file:

Read Also: Laravel Vue Flash Message Example From Scratch
npm run dev

Now you can check our example.

I hope it can help you...

Tags :
Previous

How to Get Specific Key Value from Multidimensional Array PHP?
Next

How to Get Element by ID in Vue JS?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares