Laravel Vue Js Vuex Vue-Router And Sass Configuration Example

Hello artisan,

In this laravel vue js tutorial, I will show you a complete setup example of how to set up vue js, vuex and vue router in Laravel application. Using this vue js, vuex and vue router setup, you will know how to create a single page application using laravel and vue js.

I will guide you step by step so that you can understand. I will give a complete example of laravel vuex tutorial and also install vuex in laravel application. After that we will install vue router in Laravel.

So in this example, will install vue js in laravel, then we will install vuex in laravel then we will install vue router in laravel. After that we will show you a simple example of how to use vuex in laravel by creating a counter using vuex.

Setp 1: Download Laravel

First of all, download a fresh Laravel project by the following command:

laravel new laravel-vue

Step 2: Install Required Packages

We need to install some required packages as dev dependencies.

npm i

Then run 

yarn add -D vue vue-template-compiler vue-router vuex sass sass-loader
or using npm 
npm install --save-dev vue vue-template-compiler vue-router vuex sass sass-loader

Now create a folder structure like that:

resources/
-assets/
--css
--js/
---Components/
----Pages/
-----Home.vue
-----About.vue
----Header/
-----Navbar.vue
​​​​---Mixins
---Router/
----index.js
----routes.js
---Store/
----index.js
---Styles/
----app.scss
App.vue
app.js
bootstrap.js

Step 3: Create Vue Router

We have installed vue router. Now we have to create routes for our single page application in laravel vue js. So update the following file:

resources/assets/js/Router/routes.js

const routes = [
    {
        path: '/',
        component: () => import('../Components/Pages/Home.vue'),
        name: 'home'
    },
    {
        path: '/about',
        component: () => import('../Components/Pages/About.vue'),
        name: 'about'
    }
]

export default routes;

Next, We will set up a Vue Router instance in the index.js file (inside the Router folder) and export the instance.

resources/assets/js/Router/index.js

import VueRouter from 'vue-router';
import routes from './routes';

const router = new VueRouter({
    mode: 'history',
    routes, 
});

export default router;

Step 4: Set up Vuex

In this step, we have to set up vuex in laravel. So do the following stuff:

resources/assets/js/Store/index.js

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    INCREMENT(state) {
      state.count++
    },
  },
  actions: {}
})

export default store;

Now open app.js and update it like:

resources/assets/js/app.js

require('./bootstrap')

import Vue from 'vue'
import VueRouter from 'vue-router';

import router from './Router/index'
import store from './Store/index';
import App from './App.vue'

Vue.use(VueRouter)

const app = new Vue({
    el: '#app',
    router,
    store,
    components: {App}
});

Step 5: Setup Vue Router

Now in this step, we have to set up vue router. At this point, we can set up the all components required. The App.vue is the entry component like you will see in our Vue instance setup, because of that we’ll have the router-view component here.

resources/assets/js/App.vue

Recommended: Vuex Complete Guide with Axios Api Call in Vue Js

And update the Navbar component like: It’ll look something like this:

resources/assets/js/Components/Header/Navbar.vue

Now update all the pages like:

resources/assets/js/Components/Pages/About.vue

Now update home page like:

resources/assets/js/Components/Pages/Home.vue

Step 6: Setup Laravel

We’ll update the welcome.blade.php file within resources/views. Update it like:

resources/views/welcome.blade.php

Finally, we’ll update the web.php file like:

routes/web.php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/{any?}', function () {
    return view('welcome');
});

Now almost we are ready to go. Update webpack.mix.js like:

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
    .vue()
    .sass('resources/assets/sass/app.scss', 'public/css');

Read also: Learn How to Use Vuex In Laravel 9.x Application

Now run npm run watch and php artisan serve to test it. Hope it can help you.