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

[sodatea]

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

[chipit24]

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