I tried to learn vuejs with a Symfony app. I have a problem that I don't understand ...
With a "normal" file 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;
The code above shows me 'Hello test' in my index.html.twig
I want to do in Single file Component because I like it, but with the code below, it shows me nothing. The warning is :
[Vue warn]: Component is missing template or render function. at <Products> at <App>
products.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')
pages/products.vue
<template>
<h1>Hi !</h1>
</template>
<script>
export default {
name: 'Products',
};
</script>
Even with a simple way to show something.
import { createApp } from 'vue';
// components
import App from './pages/products.vue';
const app = createApp({})
app.component('products', App)
app.mount('#app')
or just
import { createApp } from 'vue';
// components
import App from './pages/products.vue';
createApp(App).mount('#app')
I have the same warning and it show nothing in my browser
IT WORKS !
I just delete the line loader: 'vue-loader' in my webpack (I have .addLoader({test: /\.vue$/,})) config then i can see my template !
(But i don't understand why...)