vue.js - Uncaught TypeError: VueRouter is not a constructor

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
const routes = [
    {path:'/home', component:home},
    {path:'/department', component:department},
    {path:'/employee', component:employee}
const router = new VueRouter({
    routes
const app = new Vue({
    router
}).$mount('#app')
And this is how my index.html looks (I'm using Vue CDN):
<html lang="en">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
    <div id="app" class="container">
        <h3 class="d-flex justify-content-center">
            Vue JS Front End
        <h5 class="d-flex justify-content-center">
            Employee Management Portal
        <nav class="navbar navbar-expand-sm bg-light navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/home">Home</router-link>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/department">Department</router-link>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/employee">Employee</router-link>
        <router-view></router-view>
    <script src="variables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="home.js"></script>
    <script src="department.js"></script>
    <script src="employee.js"></script>
    <script src="app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
I get the following error when opening index.html: "Uncaught TypeError: VueRouter is not a constructor"
I tried the solution provided by another post on SO, by adding the following to the top of my app.js file:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
However, I then get the error "Uncaught SyntaxError: Cannot use import statement outside a module". Trying to fix this error seemed to get me in a rabbit hole. Is there a simple solution available for my original problem?
Your code is completely valid for Vue 2 and Vue Router 3, but you are using Vue 3 and Vue Router 4, which have a different syntax:
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
in router/index.js
import {createRouter} from 'vue-router';
    import { routesConfig } from "./routesConfig";
    const routes = [...routesConfig]
    const router = createRouter ({routes})
    export default router
in routesConfig.js
    import { Home } from "../views/home/routeConfig.js";
    export const routesConfig = [
in /views/home/routeConfig.js
    export const Home = {
     path: "/home",
     name: "Home",
     component: () => import("./index.vue")
department and employee like home route config
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.