How do I install a simple version of Vue 3 into a Laravel 8 project?

Question

I want to install Vue 3 into a Laravel 8 project, but I don't want to use something like laravel/ui because it adds Bootstrap and a bunch of other stuff I don't want.

I tried npm i vue@next, and it installs Vue 3, but when I try to do import { createApp } from 'vue'; in app.js, etc., I get a bunch of Webpack errors on npm run dev with Laravel Mix ("laravel-mix": "^6.0.6", in package.json).

This is the webpack.mix.js file I'm using:

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

mix
    .extract(['vue'])
    .js('resources/js/app.js', 'public/js/')
    .vue()
    .version();

And I get this error when I run npm run dev:

[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
(Stack trace here.)

Does anyone know how to simply install Vue 3 (without a bunch of additional scaffolding) in Laravel 8? Thank you.

Are you using Laravel mix? If so, what version are you using and can you add the contents of your `webpack.mix.js` file to your post? — Rwd, Aug 02 '21 at 16:02

score 0 · Answer 1 · answered Aug 03 '21 at 12:36

After searching more, I found another SO post with essentially the same question and an answer that worked.

Instead of just doing npm i vue@next, I had to do the following instead:

npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next

After that, everything worked as expected.

Here's the SO post I referenced: Install vue 3.0 in laravel

How do I install a simple version of Vue 3 into a Laravel 8 project?

1 Answers1