How To Install Vue in Laravel 8

Hi guys,

Today I am sharing, how to install Vue.js in Laravel 8. After a rumor of deprecation of popular Laravel package laravel/ui,  people are looking for help in installing Vue in laravel 8.

Note: laravel/ui is not deprecated and will be maintained and available for future versions of laravel 9, 10 and so on.

Installing Vue in laravel 8 was a little confusing at first because I am also new to Vue js, then later I thought it’s just a js library, why not try installing it like we install any npm package. And guess what, it worked. But you should know Vuejs is not just a JS library but a Front-End Framework. You can use anything as Backend core PHP, laravel, Codeigniter, etc.

In this topic, let’s just focus on how to install Vue js in Laravel 8.

Create a new laravel project, name it anything you want, I am going to name it the Vueapp.

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

If you have installed, laravel installer, just type bellow script in your terminal

laravel new vueapp

Congrats!, you just installed fresh laravel app.

Lets install npm packages

    npm install
  	npm run dev
  

Now we just installed all required npm packages except the main that is Vue, lets install it.

npm install vue@next

Wait for it to get install. We just install Vue here. Next, we will configure mix.

Now, open your webpack.mix.js, and make sure that looks like bellow

  mix.js('resources/js/app.js', 'public/js').vue()

    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
  

Save the file, now run bellow command, the mix will automatically download required dependency for Vue. If you need a Vue router, you need to install it yourself, its not so hard just try installing it like you do with other npm packages, visit Vuejs Offical page for help.

npm run dev

When you run above command, you will see mix installing dependencies. Now lets test it.

Open your welcome.blade.php, remove all code inside body.

Add bellow code inside head tag.

  <link href="css/app.css" rel="stylesheet">
  
  <script defer="" src="js/app.js"></script>
  

Now, add a div with an id inside body tag

<div id="root"></div>

Now lets open app.js from resources/js/app.js, and add bellow code

  import {createApp} from 'vue';

import App from './views/App.vue';

createApp(App).mount('#app');
  
  

In Above code, we are importing App.vue file, which we have to create next, create folder views inside resources/js/views and create a file App.vue inside that folder. and add bellow code

Now lets, run this code

npm run dev

Now, visit your laravel installation, you will be seeing the Welcome guys message from Vue.

That’s it. Now you can install a laravel passport for API authentication and Axios for requesting your backend for data.

Also, you can use laravel/ui package with vue.

Thanks