CODEWITHSUNDEEP
vue.jsvue-router
Edward Glapthorn
Edward Glapthorn

Reputation: 71

Uncaught TypeError: VueRouter is not a constructor

I have the following code in my app.js

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">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    
    <div id="app" class="container">
        <h3 class="d-flex justify-content-center">
            Vue JS Front End
        </h3>
        <h5 class="d-flex justify-content-center">
            Employee Management Portal
        </h5>

        <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>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/department">Department</router-link>
                </li>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    to="/employee">Employee</router-link>
                </li>
            </ul>
        </nav>
        <router-view></router-view>
    </div>

    <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/[email protected]/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?

Upvotes: 2

Views: 1783

Answers (2)

Ali Mohammadabadi
Ali Mohammadabadi

Reputation: 1

"vue": "^3.2.16", "vue-router": "^4.0.12"

in app.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.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 = [
      Home
    ]

in /views/home/routeConfig.js

    export const Home = {
     path: "/home",
     name: "Home",
     component: () => import("./index.vue")
    };

department and employee like home route config

Upvotes: 0

Romalex
Romalex

Reputation: 1829

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

Upvotes: 4

Related Questions