Vue is not defined in a standalone web component

user_6796003 0
Viewed 474

I am building a standalone Vue component and using it in another Vue project.

Build component:

vue build --target wc --inline-vue --name user-menu user-menu.vue

It's a simple component so far without functionality, just markup.

Then, in the main project in package.json:

  "devDependencies": {
    "user-menu": "git+https://........user-menu.git",

Then, in the main.js:

import Vue from "vue";
import UserMenu from "user-menu"
....
Vue.use(UserMenu);
const app = new Vue(config).$mount("#root");
window.app = app;
Vue.use(UserMenu);

And it says:

user-menu.js?e2ea:1446 Uncaught ReferenceError: Vue is not defined

on a row

module.exports = Vue;

But the Vue CLI 3 documentation says that:

In web component mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. The bundle will assume Vue is available on the host page as a global variable.

Any idea how to fix that?

web-component vue.js
1 Answers

Finally I came to the following solution: the component should not be built at all. Source files are enought to be imported like this:

import UserMenu from "user-menu/user-menu";

Pay attention that the path should point at the imported vue file, not just to the folder. But the extension "vue" must be skipped. The final application will build it all together.

user_67960030
Related