How to add Router to @vue/cli app with vuejs 3?

Question

Learning vuejs3 I created new @vue/cli app with command

vue create myapp

with vuejs 3 selected I added Router to my project and added Router reference in my src/main.js :

import { createApp } from 'vue'

import { createRouter/*, createWebHistory */ } from 'vue-router'
import WelcomeScreen from './pages/WelcomeScreen.vue'
import UsersList from './pages/UsersList.vue'

import App from './App.vue'

const router = createRouter({
  // history: createWebHistory(),
  mode: 'history',
  routes: [
    { path: '/', component: WelcomeScreen },
    { path: '/users', component: UsersList }
  ]
})
const app = createApp(App)
app.use(router)

app.mount('#app')

But In the console I see warning :

"export 'createRouter' was not found in 'vue-router'

and error :

main.js?56d7:10 Uncaught TypeError: Object(...) is not a function

In my package.json I have :

  "dependencies": {
    "core-js": "^3.6.5",
    "mitt": "^2.1.0",
    "vue": "^3.0.0",
    "vue-router": "^3.4.8"
  },

and

$ vue --version
@vue/cli 4.5.8

Which way is valid? Also are some some vuejs3 tutorials for @vue/cli? I found some vuejs 3 tutorials, but not for @vue/cli and that raise some confusion...

Say in my @vue/cli with vue2 I use file src/router/index.js, but I do not remember if I have created manually...

Thanks!

Please add vue-router with version "vue-router": "^4.0.0-beta.13" npmjs.com/package/vue-router/v/4.0.0-beta.13 — ThienSuBS
– ThienSuBS, Commented Nov 3, 2020 at 7:39

Ahmet Emre · Accepted Answer · 2021-01-03 07:33:17Z

13

You need install vue-router like this for vue3:

npm install vue-router@next --save

Router.js

import { createApp } from 'vue'
import App from './App.vue'
    import { createRouter, createWebHistory } from "vue-router"
    const routeInfos = [
        {
            path : "/",
            component : HomePage
        },
        {
            path : "/favorites",
            component : FavoritesPage
        }
    ]
    
    const router = createRouter({
        history : createWebHistory(),
        routes : routeInfos
    })
    
    export default router;

import In Main.js

import router from "./router"
createApp(App).use(router).mount('#app')

answered Jan 3, 2021 at 7:33

Ahmet Emre

1682 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davod Aslani Fakor Over a year ago

Hi.i think you should check this blog again. vuemastery.com/blog/vue-router-a-tutorial-for-vue-3

Cyebukayire · Accepted Answer · 2022-01-16 10:43:33Z

0

I had the same problem and found the answer here

// uninstall vue2.x vue-router

npm uninstall vue-router --save

// install vue3 vue-router

npm install vue-router@next --save

answered Jan 16, 2022 at 10:43

Cyebukayire

98710 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to add Router to @vue/cli app with vuejs 3?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related