Uncaught TypeError: Cannot read property 'use' of undefined. When using Vuex

[andreysuha2]

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();

    //aliases config
    config.resolve.alias
        .set("@assets", path.resolve(__dirname, "./src/assets"))
        .set("@scss", path.resolve(__dirname, "./src/assets/scss"))
        .set("@fonts", path.resolve(__dirname, "./src/assets/fonts"))
        .set("@icons", path.resolve(__dirname, "./src/assets/icons"))
        .set("@img", path.resolve(__dirname, "./src/assets/images"))
        .set("@js", path.resolve(__dirname, "./src/assets/js"))
        .set("@helpers", path.resolve(__dirname, "./src/assets/js/helpers"))
        .set("@store", path.resolve(__dirname, "./src/store"))
        .set("@components", path.resolve(__dirname, "./src/components"))
        .set("@globalComponents", path.resolve(__dirname, "./src/components/global"))
        .set("vue$", "vue/dist/vue.common.js");
},
configureWebpack: {
    plugins: [
        new webpack.DefinePlugin({ isDev: process.env.NODE_ENV !== "production" }),
        new webpack.ProvidePlugin({  dl: path.resolve(__dirname, "./src/assets/js/devLogger") })
    ]
}

};
`

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?

[kenger]

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.