Install vue 3.0 in laravel

Update

Laravel mix v6 is now in beta, use the guide here to upgrade and use Vue v3.

Old answer

You don't need to use the vue3 plugin. I got working as follows:

Install Vue3, Vue3 loader and the compiler:

npm install vue@next vue-loader@next @vue/compiler-sfc

Then in your app.js import vue from the esm bundle:

import { createApp } from 'vue/dist/vue.esm-bundler.js';

Then create your app and mount it:

createApp({}).mount('#app')

Now just build your assets as usual with mix

 npm run dev

Update 2022

For those who prefer Vite, there's a tool called Laravel Vite which is a project based on PHP package, Vite plugin and preset, you could install it as follows :

npx @preset/cli apply laravel:vite

This removes the default config in the Laravel fresh project.

For further details please check the different section in official docs

---

Update October 2020

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

then

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.

OLD ANSWER

Laravel doesn't support vue 3 yet, but you could try out laravel-mix-vue3 :

Installation :

npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3  --save-dev

Usage :

Configure in webpack.mix.js as follows :

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

require("laravel-mix-vue3");

mix.vue3("resources/js/app.js", "public/js");