How to create an NPM package of a vue.js project which uses Vuex?

I am currently stuck on how to create an NPM package out of a project of mine which uses Vuex.

There are plenty of tutorials and repositories on how to publish Vue comopnents but how do I register my Vuex module into someone elses Vuex store?

My code is neatly placed into a Vuex store module, so I pretty much just need to register in into the store of whoever installed my package.

I guess there needs to be a check if Vuex is actually set up and then somehow make sure everything is imported and the store.modules property gets updated or something?

I feel like I have no idea where to start, has this been done before or can someone perhaps link me to an example repository for this usecase?

Thanks for reading, cheers.

In the easiest setup, you would juts have to export the vuex module and the user would create his store as usual and then add the module to his store like any other module.

If you want to provide some “install” function, just write something like this in your packages index.js:

import yourModule from '/.module.js'

export default function install (store) {
  store.registerModule('desiredModuleName', yourModule)
}

Then users can do:

import YourPackage from 'yourpackage'
import store from './store' // their store, without your module

YourPackage(store) // registers your module.

or better, use the Plugin interface that Vuex provides:

https://vuex.vuejs.org/en/plugins.html

Butr to spin this a bit further:

Does this package only affect Vuex or does it add functionality to Vue itself as well? If you already use Vue.use() to call an add functionality to Vue (register components or whatever, then combine this:

import yourComponent from './yourComponent.vue'
import yourModule from '/.module.js'

function install(Vue, options ={}) {
  if (!options.store) console.log('Please provide a store!!')

  Vue.component('your-component', yourComponent)

  options.store.registerModule('desiredName', yourModule)
}

export default {
  install
}

// usage:
import YourPackage from 'yourpackage'
import store from './store' // their store, without your module

Vue.use(YourPackage, { store })
6 Likes

I know this is super old, but it is extremely relevant for me, so I apologize for reviving the dead.

I am going to use the above idea and am instantiating my store with a function because I plan on using SSR.

export default () => {
  const Store = new Vuex.Store({
    modules: {},
    strict: debug,
    plugins: debug ? [createLogger()] : []
  })
  return Store
}

When I do the following,

// usage:
import YourPackage from 'yourpackage'
import store from './store'

Vue.use(YourPackage, { store })

I get the error:

options.store.registerModule is not a function

When I do this, everything works.

const app = new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Vue.use(YourPackage, { store: app.$store })

I am wondering if there is a better way of retrieving the instantiated store or is this good enough?

1 Like