How to setup Vue 3 with Laravel 8 ?

boussadjra

Brahim

Posted on December 20, 2020

How to setup Vue 3 with Laravel 8 ?

Now with laravel-mix v6 you could run Vue 3 code in Laravel App:

1. Installation :

npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next
Enter fullscreen mode Exit fullscreen mode

npm i
Enter fullscreen mode Exit fullscreen mode

before doing that try to remove the following dependencies from package.json which some of them are added by php artisan ui vue :

  • vue
  • vue-template-compiler
  • laravel-mix

2. Config:

in the package.json change the scripts to the following ones:

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}
Enter fullscreen mode Exit fullscreen mode

webpack.mix.js should contain :

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

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

Enter fullscreen mode Exit fullscreen mode

The minimum content of resources/js/app.js

import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")
Enter fullscreen mode Exit fullscreen mode

In order to avoid this confusing steps clone this REPOSITORY and start coding.

if this article helped you please don't to forget to upvote my answer here

💖 💪 🙅 🚩
boussadjra
Brahim

Posted on December 20, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related