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

user_14789499 0
Viewed 198

I am trying to create a chromium extension with VueJS3. Locally, everything works, the components are displayed where they need to be. But once exporting in Chrome extensions, nothing is displayed except the first component of my App.js. Why?

❤︎ manifest.json:

{
   "name" : "MyProject",
   "version" : "0.20.1",
   "permissions": ["cookies", "webRequest", "tabs", "storage", "<all_urls>"],
   "background": {
       "scripts": [
         "/js/browser-polyfill.js",
         "/js/browser-polyfill.js.map",
         "/js/chunk-vendors.6711c78c.js",
         "/js/chunk-vendors.6711c78c.js.map",
         "/js/app.b9302fd1.js",
         "/js/app.b9302fd1.js.map"
       ],
       "persistent": true
   },
   "content_scripts": [{
       "matches": [
           "<all_urls>" 
       ],
       "js": [
           "/js/browser-polyfill.js",
           "/js/browser-polyfill.js.map",
           "/js/chunk-vendors.6711c78c.js",
           "/js/chunk-vendors.6711c78c.js.map",
           "/js/app.b9302fd1.js",
           "/js/app.b9302fd1.js.map"
       ]
   }],
   "browser_action": {
       "default_title": "MyProject",
       "default_popup": "index.html"
   },
   "manifest_version": 2
}

❤︎ router.js:

import { createRouter, createWebHistory } from "vue-router";
//first level
import Overview from "../views/Overview.vue";
import Details from "../views/Details.vue";
//second level
import DetailsInfo from "@/components/Details-Info.vue";

const routes = [
  {
    path: "/",
    name: "Overview",
    component: Overview
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

❤︎ app.vue:

<template>
  <div>
    <GeneralNavigation />
    <router-view></router-view>
  </div>

</template>

And for a visual explication: The local result and The extension result (after build)

browser-extension vue-router vuejs3 vue.js google-chrome-extension
1 Answers

I finally found the answer! Google chrome exetension use a relative path which matches with the file structure of the folder.

I simply change my main route "/" as "/index.html" in Router.js before building the application and this is worked!

❤︎ router.js:

import { createRouter, createWebHistory } from "vue-router";
//first level
import Overview from "../views/Overview.vue";
import Details from "../views/Details.vue";
//second level
import DetailsInfo from "@/components/Details-Info.vue";

const routes = [
  {
    path: "/index.html",
    name: "Overview",
    component: Overview
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

I hope it's can be usefull for other!

user_147894990
Related