Traté de aprender vuejs con una aplicación Symfony. tengo un problema que no entiendo...
Con un archivo "normal" products.js
import { createApp, h } from 'vue'; const template = '<h1>Hello {{firstName }}! </h1>' const app = createApp({ data() { return { firstName: 'test', } }, template: template }).mount('#app') window.app = app;El código anterior me muestra 'Hello test' en mi index.html.twig
Quiero hacerlo en un solo componente de archivo porque me gusta, pero con el código a continuación, no me muestra nada. La advertencia es:
[Vue warn]: Component is missing template or render function. at <Products> at <App>
productos.js
import { createApp, h } from 'vue'; import { createWebHashHistory, createRouter } from "vue-router"; // components import App from './pages/products'; const app = createApp({}); app.component('products', App); // Router const router = createRouter({ history: createWebHashHistory(), routes: [ { path: "/", component: App }, ], }); app.use(router); app.config.devtools = true app.mount('#app')páginas/productos.vue
<template> <h1>Hi !</h1> </template> <script> export default { name: 'Products', }; </script>Incluso con una forma sencilla de mostrar algo.
import { createApp } from 'vue'; // components import App from './pages/products.vue'; const app = createApp({}) app.component('products', App) app.mount('#app')o solo
import { createApp } from 'vue'; // components import App from './pages/products.vue'; createApp(App).mount('#app')Tengo la misma advertencia y no muestra nada en mi navegador.
FUNCIONA !
Simplemente elimino el loader: 'vue-loader' en mi paquete web (tengo .addLoader({test: /\.vue$/,}) ) config, ¡entonces puedo ver mi plantilla! (Pero no entiendo por qué...)