Estoy siguiendo un tutorial sobre el desarrollo de PHP + Vue, pero me quedo atascado en el punto en el que tengo que importar un archivo Vue dentro de mi archivo app.js. Al ejecutar npm run hot, la terminal dice que no se encontró el módulo. Error completo:
Módulo no encontrado: Error: no se puede resolver './vue/app' en 'C:\xampp\htdocs\first-app\first-app\resources\js'
Mi estructura de carpetas es la siguiente:
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.jsapp.vue, el archivo Vue en cuestión:
<template> <div>Hello</div> </template> <script> export default {} </script>App.js, el archivo donde intento importar el archivo Vue:
require('./bootstrap'); import Vue from 'vue' import App from './vue/app' const app = new Vue({ el: '#app', components: { App } })Finalmente, welcome.blade.php donde uso el archivo app.js:
<!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>También es bueno tener en cuenta que uso VSCode, y cuando intento autocompletar, la importación no funciona. Reconoce la carpeta vue pero no el archivo app.vue que contiene.
¿Alguien puede detectar lo que estoy haciendo mal? ¡Cualquier respuesta sería apreciada!
El archivo se llama app.vue , pero lo está importando sin la extensión, lo que genera el error que observó.
Incluya la extensión .vue al importar SFC:
// import App from './vue/app' ❌ import App from './vue/app.vue' ✅Al principio, puede registrar el componente de la app en resources/app.js , luego puede usarlo.
require('./bootstrap'); import Vue from 'vue' Vue.component('app', require('./vue/app.vue').default); const app = new Vue({ el: '#app', })