vue-cli: Store not working in web components

Version

3.0.1

Node and OS info

node 10.7.0 / npm 6.3.0

Steps to reproduce

– Go to vue-cli GUI – create new project (vuex, babel, less-css, no typescript) – make a simple state in vuex: foo: "bar" – make it a getter aswell – go to App.vue – import mapGetters from vuex – use mapGetters in computed to get the foo value – use it in the App.vue template: This is foo: {{ foo }} – build a web component named: my-component – open demo.html in a browser

What is expected?

No error

What is actually happening?

Error in console regarding the store 😦

Without the store, webcomponents seem to work fine

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 19 (17 by maintainers)

Commits related to this issue

missing documentation for building with vuex I really needed this tip and luckily got it from this awesome community in a github issue. This definitely needs to be in the docs aswell: https://githu... — committed to katerlouis/vue-cli by katerlouis 6 years ago
initialize store in APP.vue instead of main https://github.com/vuejs/vue-cli/issues/2304#issuecomment-414682432 — committed to Kentico/ems-extension-marketplace by Simply007 5 years ago
missing documentation for building with vuex (#2319) I really needed this tip and luckily got it from this awesome community in a github issue. This definitely needs to be in the docs aswell: https... — committed to vuejs/vue-cli by katerlouis 5 years ago

Most upvoted comments

A web component is a library, conceptually.

So its entry point is not main.js, but an entry-wc.js file generated here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js

So to use vuex in web component target, you need to initialize the store in App.vue:

import store from './store'

// ...

export default {
  store,
  name: 'app',
  // ...
}

+26

sodatea on Aug 21, 2018

From the Vuex docs:

When using a module system, it requires importing the store in every component that uses store state, and also requires mocking when testing the component.

Vuex provides a mechanism to “inject” the store into all child components from the root component with the store option (enabled by Vue.use(Vuex)):

Is this somehow possible to set up with a library build target? In lib mode, Vue is externalized, so we can’t rely on new Vue({ store, ... }).

chipit24 on Dec 5, 2018

You entrust me, the one struggling with the terminology and concepts behind it, to alter / enhance the official documentation?

tumblr_njzrzaicmg1s3h43ko1_500

katerlouis on Aug 22, 2018

It looks like vuex is not registered correctly. Is your main.js contains those lines? :

import VueRouter from 'vue-router'
Vue.use(VueRouter)

Also can you profide a reproduction repo please? It will easier for us to help you 🙂

Kocal on Aug 21, 2018

PRs are welcome 😀

sodatea on Aug 21, 2018

Oh damn, I always confound vuex and vue-router 😢

I will check on my side

Kocal on Aug 21, 2018

omg, sorry for the missing error information. I edited the main post

katerlouis on Aug 21, 2018