Vue - use the same plugin with multiple configuration and different name at the same time?

Question

I am trying to use a Vue plugin Vue Currency Input with two different configuration at the same time:

import Vue from 'vue'
import VueCurrencyInput from 'vue-currency-input'

const options = {
  globalOptions: {
    currency: 'BRL',
    locale: 'pt-BR',
    precision: 2,
    allowNegative: false,
    autoDecimalMode: true,
    distractionFree: { hideNegligibleDecimalDigits: false, hideCurrencySymbol: false, hideGroupingSymbol: false }
  }
}

const optionsDecimal = {
  globalOptions: {
    currency: false,
    locale: 'de-DE',
    precision: 4,
    allowNegative: false,
    autoDecimalMode: true,
    distractionFree: { hideNegligibleDecimalDigits: false, hideCurrencySymbol: true, hideGroupingSymbol: true }
  },
  directiveName: 'decimal',
  componentName: 'DecimalInput'
}

Vue.use(VueCurrencyInput, options)
Vue.use(VueCurrencyInput, optionsDecimal)

But it is not working, it only register the first configuration.

I need it to format to money format (options) and to decimal format (optionsDecimal). I have changed the plugin default component name and directive name in the second configuration and it still not working.

Is it possible to achieve somehow?

user_11813677 · Answer

Following @Ouroborus comment I created only one global config, then created a module exporting the second configuration and I'm using it like this:

import decimalInputConfig from '../../../plugins/decimal-input' // the module with optionsDecimal object
...
computed: {
  decimalInputConfig: () => decimalInputConfig
}

and in template:

Vue - use the same plugin with multiple configuration and different name at the same time?

1 Answers