Started a new Vue project using the CLI by running:
vue create my-project
Decided to incorporate two pages, so I installed the latest version of vue-router (currently v3.4.8) and followed a helpful Vue Mastery tutorial on routing.
This is how my router.js file is structured:
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
In addition, 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')
The Home and About components are quite basic in structure, as seen below:
<template>
<div>TODO: Home</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
Unfortunately, an error has surfaced with the message:
Uncaught TypeError: Object(...) is not a function
at eval (router.js?41cb:5)
This issue specifically arises within the createRouter function call.
Could there be an error in my implementation?
Edit: after feedback from Boussadjra Brahim, I realized that originally createWebHistory was not being called as a function. I have since updated the code accordingly.
Coincidentally, once rectified, the error no longer occurs during its invocation.