How to use vue-currency-input in Vue 2

[jotapardo]

I'm trying to inplement the pluggin vue-currency-input using vue 2.6.

"vue": "^2.6.12",
https://dm4t2.github.io/vue-currency-input/guide.html

However in the documentation only details this information:

Compatibility

Vue Currency Input 3.x requires either Vue 2.7 or Vue 3. For Vue 2.6 or earlier, please use Vue Currency Input 2.x with the Vue Composition API plugin.

What does mean "use with the Vue Composition API plugin."?

I installed these packages:

npm install vue-currency-input npm install @vue/composition-api 

Then in the main.js file I added the following lines after import Vue from "vue"; :

import VueCompositionAPI from "@vue/composition-api"; Vue.use(VueCompositionAPI); 

Then I create the component CurrencyInput.vue with this:

<template> <input ref="inputRef" type="text" /> </template> <script> import { useCurrencyInput } from "vue-currency-input"; export default { name: "oCurrencyInput", props: { value: Number options: Object, }, setup(props) { const { inputRef } = useCurrencyInput(props.options); return { inputRef }; }, }; </script> 

Then I tried to use it as normally we do.

<template> <CurrencyInput v-model="value" :options="{ currency: 'EUR' }" /> </template> <script> import CurrencyInput from './CurrencyInput' export default { name: 'App', components: { CurrencyInput }, data: () => ({ value: 1234 }) } </script> 

Finally, it is not working and showing these warnings:

 WARNING Compiled with 5 warnings 10:02:52 PM warning in ./node_modules/vue-currency-input/dist/index.mjs "export 'computed' was not found in 'vue' warning in ./node_modules/vue-currency-input/dist/index.mjs "export 'getCurrentInstance' was not found in 'vue' warning in ./node_modules/vue-currency-input/dist/index.mjs "export 'ref' was not found in 'vue' warning in ./node_modules/vue-currency-input/dist/index.mjs "export 'version' was not found in 'vue' warning in ./node_modules/vue-currency-input/dist/index.mjs "export 'watch' was not found in 'vue' 

Also, I tried to add @vue/composition-api in some way like this:

 <template> <input ref="inputRef" type="text" /> </template> <script> import { useCurrencyInput } from "vue-currency-input"; import { ref, reactive } from "@vue/composition-api"; export default { name: "oCurrencyInput", props: { modelValue: value, options: Object, }, setup(props) { const { inputRef } = ref(useCurrencyInput(props.options)); return { inputRef }; }, }; </script> 

Still not working.

[jotapardo]

I found a solution. I'm using Vue 2.6

So instead of npm install vue-currency-input, I must use npm i vue-currency-input@2.5.1

[dm4t2]

v2 Docs: https://vue-currency-input-v2.netlify.app/

[jotapardo]

Sorry, but if I follow the guide mentioned I'll get same error, because the installation guide has same npm code.

So instead of npm install vue-currency-input, I must use npm i vue-currency-input@2.5.1. I can not believe why this information is not included in the official guide.

[dm4t2]

You are right, the "latest" npm dist tag now points to v3.x. I updated the v2 docs.

[jotapardo]

Is it possible to update as well the guide https://dm4t2.github.io/vue-currency-input/guide.html in order to detail that if we are using vue 2 we need to follow the guide in https://vue-currency-input-v2.netlify.app/guide.html. It was very hard for me to find the answer. I appreciate your useful help!

[jotapardo]

Something similar like this, but on the contrary...

You’re browsing the documentation for v3.x. For v2.x, click here.