How do I set up router on VUE

Bug description:
How do I set up router in vue.js?
I have installed the package vue-router and I then created the folder router with the file index.js in it.

Code index.js

import Vue from 'vue'
import VueRouter, { createRouter ,createWebHistory} from 'vue-router'

const routes = [
    path: '/',
    name: 'explore_page',
    component: () => import(/* webpackChunkName: "hello" */ '@/components/HellowWorld.vue')
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),

export default router

Code main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import router from './router' 


But this gives me the error below (see file)

Replit Profile:

Bumping for visibility. Curious if anyone has figured this out.

Curiously, that’s an error from the Repl’s devtools, what happens if you try it in a new tab?

Hi @jesse and @Firepup650
Thanks for the reply. The new tab helped me find the problem so after some googling I figured it out.
Now I got router to work
Appreciate the help

Hi @jonathan165!
It’s great to hear that you’ve fixed your problem! Could you share how exactly you solved your problem so that other people who may have similar issues can find a solution?

hi @RedCoder
The thing that solved both my problems (ie the issue with copy-pasting error messages and setting up vue-router) was opening a new tab since that gave me more information of what the problem was.
Tips is to highlight that feature for new users since it is very helpful.

After that I realized it was a vue setup problem after all (I was wrong) but the new tab helped me realize it.

Then I just followed the instructions on
and set it up accordingly and it worked. If a person i new to vue then I would recommend to use tags instead of tags.
But to each their own.


1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.