How to use vue-currency-input in Vue 2

Question

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. Finally, I saw vuejs input witdh mask new money but I could not find an answer for me.

Answer 1

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.

You are using Vue 2.6

So instead of npm install vue-currency-input, you must use npm i [email protected]

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

Yes, it means installing and using @vue/composition-api docs

You also should not use current documentation. I'm not able to find the docs for 2.x (as the site) only have a link for v1.x docs but you can easily read the docs in Markdown format directly on Github. Here are the docs for v2.x