Vue is throwing error using a youtube video https://www.youtube.com im new to vue , i installed vue router multiple times and now when i code the way shown in the video, it throws an error, the version they have used is vue2 and old version of vue router

i wanted the same code to work on my computer…

router.js( the router file )

import Vue from ‘vue’

import Router from ‘vue-router’

import HomeComp from ‘./components/Home.vue’

import LoginComp from ‘./components/Login.vue’

Vue.use(Router)

export default Router({

routes:[

    {path:'/',component:HomeComp },

    {path: '/login',component:LoginComp },

  // {path:'/register',component:Register}

]

})

the error warning

Compiling…

WARNING Compiled with 17 warnings 2:03:29 am

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘onUnmounted’ (imported as ‘onUnmounted’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘onDeactivated’ (imported as ‘onDeactivated’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘onActivated’ (imported as ‘onActivated’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘getCurrentInstance’ (imported as ‘getCurrentInstance’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘inject’ (imported as ‘inject’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘computed’ (imported as ‘computed’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘unref’ (imported as ‘unref’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘watchEffect’ (imported as ‘watchEffect’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘defineComponent’ (imported as ‘defineComponent’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘reactive’ (imported as ‘reactive’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘h’ (imported as ‘h’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘provide’ (imported as ‘provide’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘ref’ (imported as ‘ref’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘watch’ (imported as ‘watch’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘shallowRef’ (imported as ‘shallowRef’) was not found in ‘vue’ (possible exports: default)

warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

export ‘nextTick’ (imported as ‘nextTick’) was not found in ‘vue’ (possible exports: default)

warning in ./src/router.js

export ‘default’ (imported as ‘Router’) was not found in ‘vue-router’ (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

App running at:

Please can you surround your code with 3 backticksabove and below:

```
Like this
```

to make it more legible

Hi @sanjay
Go through this code

import Vue from ‘vue’
import Router from ‘vue-router’
import { createRouter, createWebHistory } from "vue-router"
import HomeComp from ‘./components/Home.vue’
import LoginComp from ‘./components/Login.vue’

Vue.use(Router)
const routes = [
        {
            path: "/",
            name: "HomeComp",
            component: HomeComp
        },
        {
            path: "/login",
            name: "LoginComp",
            component: LoginComp
        },
        {
            path: "/register",
            name: "Register",
            component: Register
        },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Hope this helps!!