Please add the vue3 SFC option (vue.runtime.esm-bundler.js) #44

cyfung1031 · 2023-08-08T09:36:03Z

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.

'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

<template>
  <div>
    <h1>{{message}}</h1>
    <p><input v-model="message"></p>
  </div>
</template>

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

`popup.js`

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

'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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

cyfung1031 changed the title ~~Please add the vue3 option~~ Please add the vue3 SFC option (vue.runtime.esm-bundler.js) Aug 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please add the vue3 SFC option (vue.runtime.esm-bundler.js) #44

Please add the vue3 SFC option (vue.runtime.esm-bundler.js) #44

cyfung1031 commented Aug 8, 2023 •

edited

Loading

Please add the vue3 SFC option (vue.runtime.esm-bundler.js) #44

Please add the vue3 SFC option (vue.runtime.esm-bundler.js) #44

Comments

cyfung1031 commented Aug 8, 2023 • edited Loading

npm package dependencies

webpack.config.js

App.vue

popup.js

popup.html

cyfung1031 commented Aug 8, 2023 •

edited

Loading

`webpack.config.js`

`App.vue`

`popup.js`

`popup.html`