CODEWITHSUNDEEP
vue.jsnpmvuex
JanPropelforwards
JanPropelforwards

Reputation: 37

Exporting Vue and Vuex in one custom npm package

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?

Upvotes: 2

Views: 638

Answers (1)

Estus Flask
Estus Flask

Reputation: 222503

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.

Upvotes: 3

Related Questions