Guide on implementing router view in VUEJS3 for a google chrome extension within a production build

I've been working on creating a Chromium extension using VueJS3 and everything looks great locally. However, when I export it as a Chrome extension, only the first component in my App.js is displayed. What could be causing this issue?

❤︎ Here is a snippet from my manifest.json:

{
   "name" : "MyProject",
   "version" : "0.20.1",
   ...

❤︎ Here is an excerpt from my router.js file:

import { createRouter, createWebHistory } from "vue-router";
...

❤︎ In my app.vue file:

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

</template>

For a better understanding, you can view the local result compared to the extension result after build.

Answer №1

After much searching, I have finally discovered the solution! The Google Chrome extension uses a relative path that aligns with the file structure of the folder.

By simply changing my main route from "/" to "/index.html" in Router.js before building the application, everything started working smoothly!

❤︎ 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 this information proves useful for others facing similar challenges!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

On a page with numerous dynamically generated select boxes, I am looking to incorporate the jQuery selectBoxIt plugin from . Using Vue js, where is the best placement for the following code snippet to connect the plugin with the select elements? $('. ...

Displaying a certain div when clicked within a loop using Vue.js and Laravel

I am currently facing an issue with displaying a hidden div upon click. The problem arises when using a loop to dynamically generate all the divs. Whenever I click the button, it shows all the divs instead of just one specific div on each click. I attempte ...

When it comes to using the text() function, the statement encounters difficulty

let person = $(".tekst").text(); if (person=="XxX") { $("#discu").css("display", "none"); } alert(person); When I access my element with class .tekst and get its text using the text() function, it correctly displays as XxX, which is what I expected. ...

Which element from the context menu has been selected?

We specialize in creating browser extensions for Chrome, Firefox, and Safari. Our latest project involves implementing context menus within the extensions that will appear when users right-click on any editable form element. I attempted to incorporate an e ...

Is it feasible to alter cookie data within a jQuery ajax call?

I'm currently developing a Chrome extension that enables users to capture all HTTP requests for a specific website, edit components of the request, and then send it again. My plan is to utilize jQuery's ajax function to design and dispatch the a ...

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

As I make my way through the Vue guide with a Rails 5 app, I've noticed that although I am able to update my Vue js object, the DOM doesn't behave as described in the Declarative Rendering section. The data and the DOM are supposed to be linke ...

The second parameter of the Ajax request is not defined

Having an issue with my Ajax request in Vue.js where the second parameter is logging as undefined in the console. I've been trying to fix this problem but haven't found a solution yet. This is the code snippet for $.ajax(): //$.ajax() to add ag ...

Is Jquery getting imported correctly, but AJAX is failing to work?

I am currently working on a Chrome extension that automatically logs in to the wifi network. I have implemented AJAX for the post request, but when I inspect the network activity of the popup, I do not see any POST requests being sent. Instead, it only sho ...

VueJS in collaboration with Quasar framework

Incorporating VueJS with Quasar framework, I created a data table. Here is my implementation: <template> <div class="q-pa-md"> <q-table title="Task List Of The Day" :columns="columns" row-key="name" :pagination ...

There is an error message in Vue nextTick: "TypeError: this.method is not a function." The error only appears in my console, but the functionality seems to be working correctly in the browser

I'm experiencing an issue where I encounter an error when accessing a certain component for the second time in my browser. The strange thing is that everything appears to be working fine initially, but the error occurs when I try to perform actions li ...

Incorporating Angular into the script code of the extension content

I am looking to customize text fields on a website using a chrome-extension. However, the website is built with Angular, so I need to modify the text fields using Angular code. To incorporate Angular in my extension's scope, I am attempting to declar ...

Learn the process of integrating VueJS with RequireJS

I am attempting to set up VueJS with RequireJS. Currently, I am using the following VueJS library: . Below is my configuration file for require: require.config({ baseUrl : "js", paths : { jquery : "libs/jquery-3.2.1.min", fullcalendar : "libs/ful ...

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

<script> new Vue({ el: '#fad' , data: { data: {}, }, mounted() { var self = this; navigator.geolocation.getCurrentPosition(success, error); function success(position) { var GEOCO ...

Issue with Google Chrome extension - Jquery functionality not functioning properly

Currently in the process of developing a Google Chrome extension and encountering an issue with my jQuery code. There are no errors showing up on the console, but my code is not working in the address.js. The goal for my Chrome extension is to extract the ...

Unable to initialize the bootstrap datepicker module

I'm having trouble initializing bootstrap-datepicker from this GitHub repository: https://github.com/uxsolutions/bootstrap-datepicker. I can't seem to get it to work properly or call any methods or events on it. My setup includes Laravel 5.4.7, ...

Google Chrome Content Script: Unable to Trigger Dynamically Added Button

In my project, the custom Google Chrome Extension content script is designed to receive a message from popup.html through the Google Chrome Message Passing API once a user logs in using popup.html. This content script is responsible for dynamically adding ...

Issue with Bootstrap-vue pagination navigation not functioning correctly (unexpectedly refreshes upon clicking a page)

I recently updated my website's gallery pagination by following a helpful guide. However, I encountered a problem where clicking on a new page number refreshes the entire webpage, unlike the smooth transition shown in the tutorial. This is not the beh ...

Load Vue: Include jQuery globally for all components

When working with vue-loader single file components, I often need to use jQuery in specific components. To do this, I typically import jQuery like so: import $ from 'jQuery' Is there a way to import jQuery globally, making it available for all ...

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

Imagine I need to access the <head> tag of a remote website like YouTube. Whenever I attempt this, I encounter an error message: Access to XMLHttpRequest at ‘Website I am trying to access for the head section’ from origin ‘My Website’ has b ...

Attempting to modify information in vue.js

I have been facing an issue with overriding data in the App.vue component. It seems that every time I try to update the data in my main.js file, the component still takes the default data. I am working with webpack as well. App.vue <template> & ...