Install vue 3.0 in laravel - laravel

Question

Is there a way to install vue 3.0 to Laravel 8? When I run
npm install vue#next
It started installing Vue 3.0, but for some reason it also began installing vue-template-compiler v2.6.12. The following appears:
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-template-compiler --save-dev --production=false
And then when I run
npm run dev
The following error appears:
vue#3.0.0 (C:\wamp64\www\vue-sample\node_modules\vue\index.js)
vue-template-compiler#2.6.12 (C:\wamp64\www\vue-sample\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same
version for both. If you are using vue-loader#>=10.0, simply update
vue-template-compiler. If you are using vue-loader#<10.0 or vueify,
re-installing vue-loader/vueify should bump vue-template-compiler to
the latest.
# ./resources/js/app.js 19:35-79 # multi ./resources/js/app.js
./resources/sass/app.scss
I am completely new in Vue. What should I do?

Answer 1

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");

Answer 2

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