Exporting Vue and Vuex in one custom npm package

user_14301206 0
Viewed 204

I am trying to break out a Vue/Vuex project into an npm package hosted privately. I think I am getting there however I am unsure of my current layout, so far I have:

src/
├── BrokerProposal
│   ├── FormInputs
│   ├── index.js
│   └── modals
└── store
    ├── index.js
    └── modules
        └── proposal
            ├── actions
            ├── getters
            ├── helpers
            ├── mutations
            └── states
                └── validations

My aim is to make the BrokerProposal directory importable which is done via the first index.js file:

const BrokerProposal = require('./BrokerCalculator.vue');

function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component("v-broker-proposal", BrokerProposal);
  }
  
const plugin = {
    install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
    GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
    GlobalVue = global.vue;
}
if (GlobalVue) {
    GlobalVue.use(plugin);
}

BrokerProposal.install = install;

export default BrokerProposal;

This project also uses vuex so I have broken out the mutators etc of the state into this package to go along with the BrokerProposal, the end user can then bind this store once importing, here is the index.js file:

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

// Vuex Modules
import tabs from './modules/tabs'
import proposal from './modules/proposal'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    tabs,
    proposal,
  },
})

export default store

I feel like I should be including another index.js file in on the same level as /src as there is a section 'main' in the package.json file that must point to something?

npm vuex vue.js
1 Answers

Side effects like Vue.use(Vuex) and GlobalVue.use(plugin) should be avoided because they may interfere with a project that consumes this package. It's the responsibility of a project to set up plugins with appropriate Vue instance.

All public exports can be named exports in entry point, e.g. src/index.js:

export { default as BrokerProposal } from './BrokerProposal';
export { default as store } from './store';

Also it's a good practice to export components, in case they need to be imported locally instead of relying on global registration with Vue.component.

user_37315010
Related