Open andreysuha2 opened 3 years ago
With --target lib Vue is externalized so you need to include it in the page where you use the component.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
You can also compile with --target lib --inline-vue
.
Hi,
This is my main.js
`import Vue from 'vue'; import VueCustomElement from "vue-custom-element"; import ZalaColorFunnel from "./zala-color-funnel"; import store from "@store";
Vue.use(VueCustomElement); ZalaColorFunnel.store = store; Vue.customElement("zala-color-funnel", ZalaColorFunnel);`
this is my store js
`import Vuex from "vuex"; import Vue from "vue"; import state from "./state"; import mutations from "./mutations"; import actions from "./actions"; import getters from "./getters"; import modules from "./modules";
Vue.use(Vuex);
export default new Vuex.Store({ strict: process.env.NODE_ENV !== "production", state, mutations, actions, getters, modules });`
I am using vue cli to create this app. This my vue.config.js
`const webpack = require("webpack"); const path = require("path");
module.exports = { css: { sourceMap: true, loaderOptions: { scss: { prependData:
@import "~@scss/_variables.scss"; @import "~@scss/_mixins.scss";
} } }, devServer: { overlay: { errors: true, warnings: true } }, pluginOptions: { lintStyleOnBuild: true, stylelint: { fix: false, files: [ 'src/*/.{vue,css,scss,sass}' ] } }, chainWebpack: config => { // eslint config config.module .rule("eslint") .test(/.(js|vue)$/) .use("eslint-loader") .loader("eslint-loader") .end();}; `
when i run vue-cli-service build --target lib --name your-component-name src/main.js its build corectly, But when i try set component on html page i get error here screenshot this error from store js on line Vue.use(Vuex)
Can you help me?