How can I create a Vuetify based browser extension?

Question

I'm using the Vue CLI UI.
I've created a project and added the vue-cli-plugin-browser-extension

So far so good.

Now I'm trying to add Vuetify into the mix.
I tried with the official plugin, but nothing shows up in the extension's popup.
I tried the CDN approach but when I try to add Vuetify to the Vue instance I get an error saying Vuetify is not defined.

Any Ideas?

Also important: I would really much prefer not to use the CDN approach if it is at all possible. Is there a way to use npm install to also install the css and fonts needed to run Vuetify?

Answer 1

NPM Solution (with css and fonts brought in using CDN)

Got it!
It's not that hard after all but you need to pay attention to the differences between a regular app and a browser extension created by the Vue plugin.

The main differences are:

1. Each part of the extension (popup, options, tab, etc.) is a completely new and isolated Vue App.
2. The html template used for the extension parts is not public/index.html

Instructions:

1. Create the project as instructed in the OP above.
2. Install the Vuetify npm package: npm install vuetify
3. In each main.js of each part you intend to use, add Vuetify:

    import Vue from 'vue'
    import App from './App.vue'

    import Vuetify from "vuetify";

    Vue.use(Vuetify);

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      render: h => h(App)
    });

4. Now look for the file public/browser-extension.html and add these lines in the header section:

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

That's it!

If you have an idea on how to convert item #4 into an npm variant, please share.