DEV Community

Brahim
Brahim

Posted on • Edited on • Originally published at stackoverflow.com

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

Top comments (3)

Collapse
 
sp86 profile image
Sergiy Chystiakov • Edited

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.

Collapse
 
stuartcreed profile image
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...

Collapse
 
stuartcreed profile image
StuartCreed

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