Created a simple Vue project using the CLI:
vue create my-project
Wanted to add two pages, so installed the latest version of vue-router (which is currently v3.4.8) and followed the vue mastery tutorial for routing.
This is what my router.js file looks like:
import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
]
})
export default router
And of course, this is what my main.js file looks like:
import { createApp } from 'vue'
import router from './router'
createApp({
template: `
<div>
<router-link to='/'>Home</router-link>
<router-link to='/create'>Create</router-link>
</div>
`
})
.use(router)
.mount('#app')
Both of the Home and About components don't really have much in them, this is what they look like:
<template>
<div>TODO: Home</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
Anyway, all of this to say that I am getting the following error on:
Uncaught TypeError: Object(...) is not a function
at eval (router.js?41cb:5)
This is specifically on createRouter
Have I done something wrong?
Edit: as Boussadjra Brahim pointed out, originally createWebHistory was just being passed in without being a function call. I've since updated the code to include this.
Interestingly enough, once that was done, the error is not happening upon it's call.