How to publish an Vue.js NPM package with a Vuex module?

Question

I am developing some Vue components that I would like to place in an NPM package. The problem that I am facing is that I have no idea how to publish components that rely on a Vuex module.

I have neatly placed all the code needed for this library of components into a separate Vuex module but how do I register my module when somebody imports my package?

A good start would be creating a plugin I guess but I would still need to check for a Vuex instance and somehow register my module.

I've seen plenty of tutorials on how to publish Vue components but not something more complex.

Any suggestions?

Tetanus

Answer 1

You should be able to just ask the user to add your vuex module (expose it as part of your packages public api) to your modules. Maybe that could be done as part of the installation function as well (if you use the plugin approach).

Precept

True, but I would love to automate this if possible. I guess that is the real question here. How to automate this. With a plugin you can hook up components because we have a Vue.component hook to register components this is not the case for Vuex modules though. – Tetanus

You would have to ask the user to pass in the store...I don't see any way around that. That said, it's common practice in the redux world: see redux-form for example. – Precept

Answer 2

This is also a helpful reference for anyone trying to figure this out:

https://forum.vuejs.org/t/how-to-create-an-npm-package-of-a-vue-js-project-which-uses-vuex/14706/2

A key thing to notice here is the usage of:

store.registerModule('desiredModuleName', yourModule)

It is a bit hidden away in the API, but this allows you to register your Vuex module as long as users pass in their store.

https://vuex.vuejs.org/en/modules.html#dynamic-module-registration

Tetanus

Answer 3

I made a helper function for this

import Vue from 'vue'
import Vuex from 'vuex'

/**
 * A package can have its own store.
 *
 * - If there is no store at all, then create the store on the root first
 * - Then add this store if it has not yet been added
 */
export const registerOrCreateStore = (vueInstance, newStoreKey, newStore) => {
  let root = vueInstance.$root
  // If we don't have a store yet, then create it
  if (!root.$store) {
    Vue.use(Vuex)
    root.$store = new Vuex.Store({})
  }

  // If we don't have the module yet, then register it
  if (!root.$store.hasModule(newStoreKey)) {
    root.$store.registerModule(newStoreKey, newStore)
  }
}

And then this is my Vue component

<script>
import * as TheStoreIWant from './store/modules/TheStoreIWant'
import { registerOrCreateStore } from '~/libs/js/helpers/vueHelper'

export default {
  name: 'MyComponentsName',
  beforeCreate() {
    registerOrCreateStore(this, 'OneUniqueStoreName', TheStoreIWant)
  },
}
</script>

And as you can see we do import * as TheStoreIWant so the structure of the store is

export const namespaced = true

export const state = {}

export const mutations = {}

...

Granulation