Integrate Vue.js with Laravel 8.x

In the path of development, we have to work with many technologies. Those we choose PHP to power the web Laravel is a popular framework among us. Laravel suggests Vue.js as a frontend framework and many of us faced difficulties for the first time to integrate Vue.js with Laravel. I faced the same problem and doesn't find the easiest solution. After doing that sometimes I finally come with the best solution for me and now I am sharing it with you.

Let’s start from the beginning. First, we need to open a new Laravel project. I hope you already worked with Laravel so that, we don’t need any other things to set up. Just run two commands to create a Laravel project which are

composer global require laravel/installer
laravel new Laravue

I named my project Laravue, you can name anything as you want. It will take some seconds to complete the task. At Laravel 8.x Vue.js comes with Laravel by default. But before using it we need to run some commands. First, we will install Laravel UI then we will generate login/registration scaffolding using Laravel UI. though we will use Vue.js so that we will use Vue in scaffolding

composer require laravel/ui
php artisan ui vue --auth

Now we need to install the Node package manager by using this command.

npm install

Then we have to run it. There are two commands to do that, one is npm run dev and the other is npm run watch both commands compile the JavaScript files but there is a basic difference between them. npm run dev command compiles all the files and after that, if you edit in any file it won’t show up until you run the command again. So, you should run the command moment before the final deployment. On the other hand, npm run watch command compiles the files and looking for the changes in the files. If you make any changes to js or Vue component files it automatically compiles the files. That's the main difference you don’t run the command again and again. So, we will use

npm run watch

Vue.js is already installed in our application, so we don’t need to install it. Now we will need Vue Router in our project. We can add it by using this npm command. One thing to remember don't close the terminal or command after running the watch command. Of course, you need the terminal and for that open another one on the project directory.

npm install vue-router

After adding Vue Router we need to initialize it in our application. You can add it directly to the resources/js/app.js file. But when it has too many routes and other components it could be difficult to manage the app.js file. To avoid this problem we will create a new file name router.js in the “resources/js” directory for all the Vue.js router. So that it will be easier to use and manipulate the router if we need any. Then we need to import Vue and vue-router to this file so that we add these codes.

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

Vue.use(VueRouter)

In “resources/js” there is a components folder where we will put all the Vue components of our application. It already has a component ExampleComponet.vue by default. So we will create another component named test.vue. Then we will copy the code from ExampleComponent and paste it to the test component and change the content. Finally my test.vue file looks like this

Ok, our components are ready now we have to prepare our router.js file. As we know we write all the Vue router in this file. We will declare an array named routes. In the routes array, we store the route path and component for the route. So, we have two components till now ExampleComponent and test component. We only write routes for these components only for now and of course, we can add many more routes if we want. We import these two components as example and test and then we bind them with the path. After that, we have to export that as a new VueRouter. And I will use the history mode of VueRouter. You might want to learn more about the history mode from this link

HTML5 History Mode | Vue Router

Finally, our router.js file looks like this.

After that,we will simply import the router in our app.js file in “rosources/js” directory and add router to vue application instance like this

Just one thing to say, I remove all the other codes form app.js file. So, if your file doesn't look like this don't panic.

We are almost done. Just a little thing to do. We have the Vue routes /test and /example right? But if you run the application and try to access the routes it will give you a 404 error because Laravel manages all the routes of our application and it doesn’t know Vue routes. So, we have to tell Laravel that, these are the vue routes and don't block them. So we will add a route that accepts all the Vue router. Just simply put this route in web.php file in the routes directory.

Route::get('/{any}', '[App\Http\Controllers\HomeController::class, 'vueroute']')->where('any', '.*');

I hope you will understand what that’s means. Now we need to create “vueroute” method in HomeController to return the view “vueview”.

public function vueroute(){
    return view('vueview');
}

Next, we will create a file in view folder and I named it “vueview.blade.php”. You can name it anything as you wish. In the file, we extend app layouts and add a section. Then we write <router-view/> tag in this section. When we hit a Vue router it searches for this tag and puts the vue component there.

@extends('layouts.app')
@section('content')
    <router-view/>
@endsection

Finally, we add two vue router link to the “app.blade.php” file. anywhere you want to show the link. I simply put them in the navigation bar. To link up a Vue router we need to use a router-link tag instead of anchor tag and “to” attributes instead of href. Like this

<li>
    <router-link to="/test"><i class="fa fa-dashboard"></i> Test</router-link>
</li>
<li>
<router-link to="/example"><i class="fa fa-dashboard"></i> Example</router-link>

</li>

Now it's done. Run “php artisan ser” command and hit the “127.0.0.1:8000/test” url in your browser. You will find two links in the navbar Test and Example just click and check that. Two vue components are loading without reloading the page. Just two things to remember. First, if you don't extend the “app.blade.php” layout then you need to add an ID named app in your main div. Like this

<div id="app">

Second, In “HomeController” there is a middleware “auth”, if you don't remove it, then you need to log in before seeing the result.