Using vue-router with vuejs3 and I get this Vue warn: Component is missing template or render function

I'am trying to make a simply router with vue-router on vuejs3 and i get this warning on the first click on a link (not the others clicks):

vue@next:1571 [Vue warn]: Component is missing template or render function.

I use vuejs3, vue-router, vscode, chrome on ubuntu

My code :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Warn - Vue 3 / Router</title>
    </head>
    <body>
        <div id="app">
            <router-link to="/">Home</router-link>
            <br />
            <router-link to="/contact">Contact</router-link>
            <router-view></router-view>
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script>
        <script>
            // App
            const app = Vue.createApp({});

            // Component
            const Home = app.component("home", {
                template: `<h1>Home</h1>`,
                name: "Home",
            });

            const Contact = app.component("contact", {
                template: `<h1>Contact</h1>`,
                name: "Contact",
            });

            // Router
            const router = VueRouter.createRouter({
                history: VueRouter.createWebHistory(),
                routes: [
                    { path: "/", component: Home },
                    { path: "/contact", component: Contact },
                ],
            });
            app.use(router);

            app.mount("#app");
        </script>
    </body>
</html>

Can you correct or give me a link for implement vue-router on vuejs3 (i'm beginner on vuejs) ? Thanks

Solution

There are two problem:

The components is registered incorrectly

app.component("home", {
    template: `<h1>Home</h1>`,
    name: "Home",
});
const Home = app.component("home");

See: https://v3.vuejs.org/api/application-api.html#component

If you use Vue Router in HTML files, only use Hash Mode

- history: VueRouter.createWebHistory(),
+ history: VueRouter.createWebHashHistory(),

The full code is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Warn - Vue 3 / Router</title>
    </head>
    <body>
        <div id="app">
            <router-link to="/">Home</router-link>
            <br />
            <router-link to="/contact">Contact</router-link>
            <router-view></router-view>
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script>
        <script>
            // App
            const app = Vue.createApp({});

            // Component
            app.component("home", {
                template: `<h1>Home</h1>`,
                name: "Home",
            });
            const Home = app.component("home");

            app.component("contact", {
                template: `<h1>Contact</h1>`,
                name: "Contact",
            });
            const Contact = app.component('contact')

            // Router
            const router = VueRouter.createRouter({
                history: VueRouter.createWebHashHistory(),
                routes: [
                    { path: "/", component: Home },
                    { path: "/contact", component: Contact },
                ],
            });
            app.use(router);

            app.mount("#app");
        </script>
    </body>
</html>