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

---

npm i

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"
}

webpack.mix.js should contain :

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

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

The minimum content of resources/js/app.js

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

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

Comments

[Sergiy Chystiakov]

Hello. I am trying to run your example with a command 'npn run watch-poll'. The console throws an error prntscr.com/x4mqd0. I took the code from the github. Commands 'composer install' and 'npm install' completed. What could be the reason? Thank you in advance.

[StuartCreed]

Hi Sergiy,
It looks like you need to upgrade your Node version.
github.com/nuxt/nuxt.js/issues/5652
phoenixnap.com/kb/update-node-js-v...

[StuartCreed]

Great post, many thanks :) I have made a Laravel Sail version of this too using your help: dev.to/stuartcreed/laravel-v8-with...