How to use VueRouter in Chrome Extension

I’ve been making a chrome extension with Vue 3 + VueRouter.

With the router.push functionality I was trying to change router-view content to a different component, meaning showing a different UI to users.

However, no matter what methods I use, I just can’t change the view.

So my App.vue has router-view and I have two components that I would like to show one at a time.

Component One is About and Component Two is Home.

What I did was that I created a method that fires off on onClick event.

So, the first view is Home (users see this view first). Then when a user clicks a button, it will swap the UI component, showing About Page. I used router.push(‘/about’) to swap the UI component to About.vue. It was unsuccessful.

I am aware of the fact that the chrome extensions are not really a web page so the routing is different but nothing seems to work.

I’ve checked this reference and tried it and sadly it was futile

How to display router view with VUEJS3 in a build project for google chrome extension

router.js

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/index.html",
    component: () => import("../src/App.vue"),
    name: "App",
  },
  {
    path: "/about",
    component: () => import("../src/views/About.vue"),
    name: "About",
  },
];

const router = createRouter({
  history: createWebHashHistory("index.html"),
  routes,
});

export default router;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import store from "./store/index";
import router from "./router";

const app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");

App.vue (when I was using router-view)

<template>
  <router-view />
</template>

If I do router-view like that on Chrome extension, nothing is showing

So I did this also to change the view by using router-link. It didn’t work as well. By clicking router-link tag, nothing was working.

<template>
 <Login />
<router-link to="/about"> About </router-link>
</template>

methods: {
  routerPush() {
      this.$router.push("about");
      this.$router.push("/about"); tried both / and without /
    },
}

<template>
 <Login />
<span @click="routerPush"> About </span> 
</template>

Did the above code to just to try out the router.push functionality. It was unsuccessful

Answer

I fixed it. The reason Vue router wasn’t working is because I didn’t have a renderer Vue to mount

You will need to have a component Renderer.vue or whatever that would contain in template and mount that component in main.js createApp(Renderer) like this

Advertisement

Answer