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!
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' ✅
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',
})