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

Asked 8/11, 2018 at 20:21 Answered 28/5, 2020 at 7:4

Solved javascript vue.js vuex web-component vue-cli-3

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.

Glarus answered 8/11, 2018 at 20:21 Comment(1)

Why not build directly with webpack + vue-loader? Out of the box solution. – Perpend 8/11, 2018 at 21:35

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

Fender answered 9/11, 2018 at 0:23 Comment(4)

Thanks for the suggestion! I was really hoping it was that simple, but that didn't fix it. I think I must be forgetting something or using vuex in a weird way in my project somehow. – Glarus 9/11, 2018 at 2:24

Indeed, since main.js is out of the picture we need to replicate all steps. I added the final piece that works for me. – Fender 9/11, 2018 at 19:7

Adding the store to App.vue worked! You don't know how much time I've spent trying to figure this out... Thank you SO MUCH!! :D – Glarus 12/11, 2018 at 17:5

Sir, you made my day ! – Antipode 27/5, 2021 at 15:26

I think this line might be giving you trouble

import store from "./store/index";

try changing it to :

import store from "./store";

The index part is implied and I wonder if it is throwing off the CLI for some reason.

Stateroom answered 8/11, 2018 at 21:42 Comment(6)

Thanks for the suggestion! I tried that and am still getting the same error. I feel like it has to be something with the way I'm using it though. Could it possibly be that I'm using the map helpers like ...mapActions? – Glarus 9/11, 2018 at 2:23

Ohhh umm this might also be a possibility.. What does your package.json have in it for vuex? I'm wondering if it got installed globally but not in the project so it isn't getting bundled correctly. – Stateroom 9/11, 2018 at 14:30

I have it in the package.json under dependencies. "vuex": ^3.0.1" – Glarus 9/11, 2018 at 14:50

hmmm.. well way to go.. ya really broke it.. My guess would be that it has something to do with how you are importing your stuff while actually creating the store so it isn't making a valid store. You could try not importing your getters and such and just making a generic, empty store from an example. Then see if it at least gets farther. Otherwise the cli may not be happy with it for some reason. – Stateroom 9/11, 2018 at 15:4

So I think I've tracked it down to being ...mapState([]), which I'm using a ton in my project. However, I'm not sure why it isn't working properly when it builds. It works perfectly fine when running locally. – Glarus 9/11, 2018 at 16:50

And there aren't any errors earlier in your code when running it? It sounds almost like something isn't transpiling correctly if you are using babel – Stateroom 9/11, 2018 at 18:49

Simple solution would be to use

Vue.use(Vuex)

inside main.js instead of store/index.js

I hope the answer is helpful

Amyamyas answered 28/5, 2020 at 7:4 Comment(0)

Loading Store in Web Components

Recommended topics

Hot tags