vuejs2 vue-router vuejs3 cdn vue-router4

VueJS 3 routing with vue-router and CDN

For the past three hours or so, I have been trying to convert a VueJS 2 + vue-router + CDN project to VueJS 3. I haven't been able to make it work so far. The VueJS 2 version works just fine. The VueJS 3 version just won't work. I understand that sooner or later a project would need to be implemented with CLI, but I'd rather use CDN for the moment since I'm still experimenting.

The error message I receive is: Uncaught ReferenceError: createRouter is not defined. I have received many others in my trials and tribulations.

Here is the JS part (VueJS 2, works fine):

const Home = { template: `<h1>Contenuto Home</h1>` };
const About = { template: `<h1>Contenuto About</h1>` };
const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

const routes = [
    { path: "/", component: Home },
    { path: "/about", component: About },
    { path: "/portfolio", component: Portfolio },
    { path: "/contatti", component: Contatti }
];

const router = new VueRouter({
    routes // short for `routes: routes`
});

const vm = new Vue ({
    router,
    el: "#app",
    data: {
        mess: "Ciao Mondo"
    }
}).$mount("#app");

The HTML looks like this (VueJS 2, works fine):

<!DOCTYPE html>
<html lang="it">
<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>Vue Router</title>
</head>
<body>
    <div id="app">
        <h1>{{ mess }}</h1>

        <!-- i links -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/portfolio">Portfolio</router-link>
        <router-link to="/contatti">Contatti</router-link>

        <!-- contenitore per il HTML -->
        <router-view></router-view>
    </div>




    <!-- VueJS -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- vue-router -->
    <script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>

    <!-- custom JS -->
    <script src="main.js"></script>
</body>
</html>

Here is my attempt at converting this code to VueJS 3 (doesn't work - Uncaught ReferenceError: createRouter is not defined):

<!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>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4"></script>


    <div id="app">
        <h1>{{ mess }}</h1>

        <!-- i links -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/portfolio">Portfolio</router-link>
        <router-link to="/contatti">Contatti</router-link>

        <!-- contenitore per il HTML -->
        <router-view></router-view>
    </div>
    
    <script>

        let app = Vue.createApp({
            data() {
                return {
                    mess: "ciao mondo"
                }
            }
        });

        const Home = { template: `<h1>Contenuto Home</h1>` };
        const About = { template: `<h1>Contenuto About</h1>` };
        const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
        const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

        const routes = [
            { path: "/", component: Home },
            { path: "/about", component: About },
            { path: "/portfolio", component: Portfolio },
            { path: "/contatti", component: Contatti }
        ];

        const router = new createRouter({
            history: createWebHistory(process.env.BASE_URL),
            routes // short for `routes: routes`
        });
    
        app.mount("#app");
        
    </script>

</body>
</html>

Solution

    const app = Vue.createApp({
        data() {
            return {
                mess: "ciao mondo"
            }
        }
    });

    const Home = { template: `<h1>Contenuto Home</h1>` };
    const About = { template: `<h1>Contenuto About</h1>` };
    const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
    const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

    const routes = [
        { path: "/", component: Home },
        { path: "/about", component: About },
        { path: "/portfolio", component: Portfolio },
        { path: "/contatti", component: Contatti }
    ];

    const router = VueRouter.createRouter({
           history: VueRouter.createWebHashHistory(),
           routes
    })

    app.use(router)
    app.mount('#app')