Vue Support

[Ibz786]

Hi 👋🏽

I just wanted to ask, does this plugin have Vue support? I've tried to create an extension using:
vite@latest and npm i @crxjs/vite-plugin -D

This is my vite.config.js

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

// https://vitejs.dev/config/
export default defineConfig({
  	plugins: [vue(), crx({manifest})],
  	resolve: {
    	    alias: {
      		'@': fileURLToPath(new URL('./src', import.meta.url))
    	    }
        }
});

But I'm getting the following error: Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Not sure if I'm doing something wrong

Thanks 😄

[jacksteamdev]

Your config looks good to me! Hard to say what's wrong without a full repo to look at. 🙏

Vue does work. You can check out some of the tests for basic Vue usage:

• Vue Content Script
• Vue Extension Page

[Ibz786]

I've added a repo here: https://github.com/Ibz786/vue-vite-chrome-extension-template

If it's helpful for your examples, please feel free to use / include it. The example I've got working also includes:
Vue Router and Pinia

[jacksteamdev]

Thanks for the great article on DEV! 🙌

I love the idea of using a router in a Chrome Extension, I'd be interested to hear your experience once you've finished your project. 🙏 I've seen people use hashes in the manifest, e.g., options_page: 'index.html#options

[Ibz786]

Hey @jacksteamdev

Thanks much appreciated 😄🙌

I've been playing around with Vue, Vue-Router and your plugin and got routing working pretty well so far. Have added another article on DEV

The solution I posted offers a cleaner URL without the need for hashing. Also updated my example repo too

The plugin is such a dream honestly, keep up the great work!

[Ibz786]

An update on the routing aspect, if anyone is curious, I got a better and more simpler way (really don't know why I didn't use this earlier 😅🤦‍♂️)

Simply do the following:

routes: [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: 'index.html',
    redirect: '/'
  },
...
]

Honestly, the Vue documentation is a blessing, I just missed it earlier: https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect-and-alias. Happy dev'ing all 🤓

[joaomede]

Thank you jacksteamdev.

Thank you Ibz786 for article https://dev.to/ibz786/adding-routing-to-a-vue-vite-chrome-extension-46lm