Is it possible to simultaneously use the same plugin with various configurations and unique names in Vue?

I'm attempting to utilize the Vue Currency Input plugin, specifically with two different configurations simultaneously:

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)

However, it seems that only the first configuration is being registered and applied.

My objective is to have one formatting money format (options) and another for decimal format (optionsDecimal). I've even modified the component and directive names in the second configuration but without success.

Is there a way to achieve this dual functionality somehow?

javascriptvue.jsvue-component

Answer №1

Upon receiving feedback from @Ouroborus, I streamlined my approach by creating a single global configuration and exporting a module that contains the second configuration. This enables me to use it as follows:

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

Implemented in the template like so:

<v-text-field
  label="Test"
  v-currency="decimalInputConfiguration"
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhance your website with the powerful combination of SweetAlert

I'm having trouble getting my ajax delete function to work with SweetAlert. I can't seem to find the error in my code. Can someone help me figure out how to fix it? function deletei(){ swal({ title: 'Are you sure?', ...

javascriptjqueryajax

Perform queries securely using AJAX when the document is fully loaded

Hello everyone, I'm facing an issue with the custom statistics feature on my website. I collect user data (similar to Google Analytics) and store it in tables for a few months. However, these tables have become too large and are causing slow page loa ...

phpjavascriptmysqlajaxsecurity

Mongoose failing to retrieve data from MongoDB

In my code, I am utilizing data from the database: Assignment and the Collection: todolist. The code is designed to interact with MongoDB in order to add, delete, or list the JSON in the collection. To properly explain the issue, I will first showcase the ...

javascriptnode.jsmongodbmongoose

Using HTML and JavaScript allows for the video URL to seamlessly open in the default video player app on the device

Working on my mediaplayer website, I want to give users the option to choose which app to play their uploaded videos with. So far, I've attempted to implement a button that triggers this action: window.open("video.mkv", '_blank'); Howeve ...

javascriptandroidhtmlvideo

Enter the variable into the parameter

I'm working with some Javascript code: document.getElementById("Grid").style.gridTemplateRows = "repeat(3, 2fr)"; I'm trying to insert a variable as an argument to modify my CSS style. When I attempt the following: "repe ...

javascriptcssdatagridtemplatecolumn

Toggle the visibility of dropdown list items in different ways: Add or Remove, or Show or

Currently, I am working on a project that involves 3 drop down lists for security questions. I have implemented javascript functionality that triggers an alert when a selection is made in any of the drop down boxes. My challenge now is figuring out how t ...

javascriptjquerydrop-down-menu

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Currently, I am endeavoring to make progress with this sample project: github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html I have made attempts at replicating the code on my personal pages.github.io account and also m ...

javascripthtmldomthree.js

Restricting href Usage Based on Session

I find myself in a challenging situation without a clear solution at hand. Within this code, I am utilizing a link and a button for which I need to save the page in a database. Therefore, creating a server control is not an option as it will not be render ...

javascriptasp.netsessionhref

Firestore version 9 - Retrieve nested collection depending on a string being present in an array

Working on a new chat application here. It has been a while since I last used Firestore. I am currently using v9 and facing an issue with retrieving the nested "messages" collection when the "users" array in the document contains a specific ID. I have man ...

javascriptreactjsfirebasegoogle-cloud-firestore

Efficient arrow function usage in jQuery map functionality

Looking to implement an arrow function in jQuery's map function. However, after trying the following code snippet, titlesText ends up being the correct length but with empty strings: let titles = $(panelBody).find('h4'); let titlesText = $(t ...

javascriptjqueryarrow-functionsmap-function

I'm struggling to comprehend the purpose of this function. [From the Codecademy Contact List exercise]

Within the "for var x in friends" loop, the program aims to search each key within the friends object, such as bill and steve. Subsequently, with the condition "friends[x].firstName === name", the check is made if the first name matches the provided inpu ...

javascriptfunction

Having trouble adjusting the label fontSize in ReactJS when using semantic-ui-react?

Is there a way to decrease the size of the label for a form input? In this scenario, attempting to set the fontSize does not work: <Form.Input label="Username" style={{fontSize: '10px'}} /> Does anyone have any suggestions on how to res ...

javascriptreactjssemantic-ui-react

Issue encountered while trying to download Jade through npm (npm install -g jade)

I am having trouble downloading jade via npm on my Mac (Yosemite). After downloading node and updating npm, I tried to install jade but encountered a series of errors that I cannot resolve. Even attempting to use sudo did not help, as it only displayed s ...

javascriptnode.jsmacosnpmpug

Leveraging NodeJS to handle server-side tasks and operations

Background: I am exploring the use of NodeJS for a project that involves scraping and storing content in Mongo. This process needs to be automated according to a set schedule. In addition, I need functions that can extract items from the Mongo database, o ...

javascriptnode.jsexpressweb-scrapingserver-side

Is it possible to analyze an API call and determine the frequency of a specific field?

Code: var textArray = new Array(); var allText = results.data._contained.text; for (var i = 0; i < allText.length; i++) { var text1 = allText[i]; var textHtml = "<div id='text_item'>"; textHtml += "& ...

javascriptjqueryhtmlcount

Activate the class only on the current element

I need help with a specific functionality on my website. I have multiple sections with content and buttons, and when a button is clicked, I want to add an active class to the corresponding content section within the same row. <div id="1" class="row"> ...

javascriptjquery

creating a post action using Node.js with Express and Angular

Process Overview I have an Angular post that communicates with my Node.js Express backend to send data to an API. My goal is to redirect the user to a different Angular page upon successful post, or display an error message if the post fails. One approac ...

javascriptangularjsnode.jsexpress

Tips for inserting text to the left rather than the right using Jquery

I recently came across this code snippet shared by some helpful users on stackoverflow and it has been working perfectly for me. However, I do have a couple of queries regarding its functionality. Firstly, how can I ensure that the current selected option ...

javascriptjquery

Angular calls a factory method from within its own factory

When working in my controller, I encountered a situation where I needed to call a factory function recursively. Previously, the code worked fine as simple JavaScript functions not defined within the factory itself, but I wanted to improve isolation. Here ...

javascriptangularjs

Combine two objects and discard any duplicate keys

I have two objects named original and custom. My goal is to merge the content from custom into original, but only update the keys in original that are also present in the custom object. Here is an example scenario: var original = { coupon: { ...

javascriptnode.js