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');
Now run npm run watch
and php artisan serve
to test it. Hope it can help you.
#laravel #laravel-9x #vue-js #vuex #vue-router