Single File Component in vuejs3 doesn't work

Question

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>

Answer 1

Try to add vue extension when importing template:

import App from './pages/products.vue';

Answer 2

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

Answer 3

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...)