Module not found:Error:Can't resolve 'vue'

user_7682181 0
Viewed 13321

I am trying to create simple CRUD with laravel and vuejs. When i run 'npm run watch' it says npm run watch

And, when I run php artisan serve, it shows nothing with no error

localhost

Here is my code app.js

app.vue

vue-router laravel-mix laravel vue.js
3 Answers

In webpack.mix.js, just put a .vue() like this:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();
user_41482660

Because you are missing the import statement, so it can not resolve Vue. Add this at the top of your app.js

import Vue from 'vue'
user_100146780

I had this same issue and I resolved it by copying the configuration from Laravel Jetstream:

// webpack.config.js

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

// webpack.mix.js 

const mix = require('laravel-mix')

mix
  .js('resources/js/app.js', 'public/js')
  .vue()
  .postCss('resources/css/app.css', 'public/css', [
    // prettier-ignore
    require('postcss-import'),
    require('postcss-nesting'),
    require('tailwindcss'),
  ])
  .webpackConfig(require('./webpack.config'))
  .sourceMaps()
;

if (mix.inProduction()) {
    mix.version();
}
leek_37650
Related