I have figured out how to use vue3 in chrome extension + webpack. hope it can be added as a template.

only `vue.runtime.esm-bundler.js` can work since Chrome MV3 cannot do eval or inline scripting.
SFC will be translated into js, html & css so it can work greatly with MV3.

## npm package dependencies

* "vue-loader@17" and "vue@next"

## `webpack.config.js`
* plugins:
* `VueLoaderPlugin`
* `webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true })`
* rules:
* `.vue` (by `vue-loader`)
* `resolve.alias.vue$` = `vue.runtime.esm-bundler.js` is required.

```js
'use strict';

const { merge } = require('webpack-merge');

const common = require('./webpack.common.js');
const PATHS = require('./paths');
const webpack = require("webpack");

const { VueLoaderPlugin } = require("vue-loader");

// Merge webpack configuration files
const config = (env, argv) =>
merge(common, {
module: {

rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
compatConfig: {

MODE: 3,
},
},
},
},
],
},
entry: {
popup: PATHS.src + '/popup.js',
contentScript: PATHS.src + '/contentScript.js',
background: PATHS.src + '/background.js'
},
devtool: argv.mode === 'production' ? false : 'source-map',
plugins:[
new VueLoaderPlugin(),
new webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true }),

],
resolve:{

alias: {
vue$: "vue/dist/vue.runtime.esm-bundler.js"
}

}
});

module.exports = config;
```

## `App.vue`

* It is the SFC file for HTML + JavaScript + CSS

```vue

export default {
data() {
return {
message: ''
};
},
created() {
this.message = 'hello';
}
}

```

## `popup.js`

* MV3 requires the JavaScript to be run in `.js` file. This is just to load the `App` from `App.vue`

```js

'use strict';

import { createApp } from "vue";

import App from "./App.vue";

function onReady() {
createApp(App).mount('#app');
}

if (document.readyState !== 'loading') {
onReady();
} else {
document.addEventListener("DOMContentLoaded", onReady, false);
}

```

## `popup.html`

* It can be any html file. For simplicity, the file used is the popup page.
* `div#app` is required and `popup.js` will load the `App.vue` into it.

```html

Hello World

```