Search code examples
javascriptvue.jsvuexweb-componentvue-cli-3

How do I ensure the vuex store gets included in my build?

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: enter image description here

And it points to this section of my-project.min.js:

enter image description here

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:

enter image description here

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.

Solution

  • 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>

    Loading Store in Web Components

    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,
  ...
}