Menu
I have a Vue application that is using vue cli 3. I'm following the guide here to try building my app with vue-cli-service build --target wc --name my-element [entry]
To test the output, I have an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-project></my-project>
<script src="https://unpkg.com/vue"></script>
<script src="my-project.min.js"></script>
</body>
</html>But I'm getting the following error when opening index.html in my browser:
And it points to this section of my-project.min.js:
My main.js:
import "@babel/polyfill";
import Vue from "vue";
import MyProject from "./MyProject.vue";
import router from "./router";
import store from "./store/index";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(MyProject),
}).$mount("#app");My store is divided into individual files for actions, getters, mutations, and the state:
And store/index.js looks like this:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import state from "./state";
import * as getters from "./getters";
import * as mutations from "./mutations";
import * as actions from "./actions";
export default new Vuex.Store({
state,
getters,
mutations,
actions,
});Everything in the project works perfectly fine during development, but when I build the project, vuex doesn't seem to be getting added correctly.
840
We are passing the global store into our Vue application instance so that our all child components can access it. // main. js import Vue from 'vue'; import store from './store/store'; import App from './App. vue'; const app = new Vue({ el: '#app', store, render: h => h(App) });
At the center of every Vuex application is the store. A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object: Vuex stores are reactive.
ts files. import Vue from 'vue'; import Vuex from 'vuex'; Vue. use(Vuex); export default new Vuex. Store({ state: { Languages: [], IsStudent: false, }, mutations: { setLanguages: (state, values) => { values.
It looks like you just need to include a CDN for Vuex (after the CDN for Vue) in your index.html.
According to this page Vuex - Installation# Direct Download / CD
Include Vuex after Vue and it will install itself automatically
The Vue CLI 3 - Build Targets docs say that Vue is externalised, and you have taken care of that with the CDN for Vue, but I'd guess the same applies to any other libraries that are hooked in to Vue with a Vue.use() statement (for example Vue Router, if your component defines child routes).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-project></my-project>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="my-project.min.js"></script>
</body>
</html>
Since in dev mode main.js adds your store to Vue, in prod mode store needs to be injected inside the web component. The following addition is sufficient to give you a working this.$store property, see Store not working in web components
<template>
...
</template>
<script>
import store from "../store/index";
export default {
props: [...],
store,
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
