nickywan123
2 months ago
381
1
Vue

cannot find module "vue"

Posted 2 months ago by nickywan123

I am trying to link my laravel with vue and I have installed all the necessary modules.

The error given on my chrome inspect is :

app.js:19532 Uncaught Error: Cannot find module 'vue'
    at webpackMissingModule (app.js:19532)
    at Object../resources/js/app.js (app.js:19532)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:19688)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

I have installed webpack as well.

Here is my code for references:

welcome.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Articles</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    </head>
    <body>
      <div id="app">
        <div class="container">
            <articles></articles>
        </div>
      </div>

      <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "webpack": "^4.43.0"
    }
}

app.js:


require('./bootstrap');

window.Vue = require('vue');

Vue.component('articles', require('./components/Articles.vue'));


const app = new Vue({
    el: '#app',
});

Articles.vue:

<template>
    <div class="container">
        <h2>Article</h2>
    </div>
</template>

I am running on Mac using valet.

Please sign in or create an account to participate in this conversation.