Can't import Vue file in JS file

user_14851144 0
Viewed 1073

I am following a tutorial on PHP + Vue development but am getting stuck at the point where I have to import a Vue file inside my app.js file. When executing npm run hot the terminal says that the module was not found. Full error:

Module not found: Error: Can't resolve './vue/app' in 'C:\xampp\htdocs\first-app\first-app\resources\js'

My folder structure is as follows:

resources/
├─ css/
├─ js/
│  ├─ app.js <-- File where I import the Vue file
│  ├─ vue/
│  │  ├─ app.vue <-- Vue file
├─ views/
│  ├─ welcome.blade.php  <-- View where I import app.js

app.vue, the Vue file in question:

<template>
  <div>Hello</div>
</template>

<script>
export default {}
</script>

App.js, the file where I try to import the Vue file:

require('./bootstrap');

import Vue from 'vue'
import App from './vue/app'

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

Finally, welcome.blade.php where I use the app.js file:

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

        <title>Laravel</title>
    </head>
    <body class="antialiased">
        <div id="app">
            <app></app>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>

It is also good to note that I use VSCode, and when I try to autocomplete the import is doesn't work. It does recognize the vue folder but not the app.vue file in it.

Can anyone spot what I am doing wrong? Any answers would be appreciated!

laravel-mix laravel vue.js php javascript
2 Answers

The file is named app.vue, but you're importing it without the extension, leading to the error you observed.

Include the .vue extension when importing SFCs:

// import App from './vue/app' ❌

import App from './vue/app.vue' ✅
user_62771510

At first you can register the app component on resources/app.js, then you can use.

require('./bootstrap');

import Vue from 'vue'
Vue.component('app', require('./vue/app.vue').default);

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