How to initialize npm package in vue

Question

I trying to use v-mask package in vue using npm. i run the npm install v-mask as the documentation says, but where exactly I should put in code to initialization? i tried to put it in the main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
Vue.use(VueMask);

createApp(App).mount('#app')

but get an error 'Vue' is not defined. what am I doing wrong?

You try to use Vue 2 plugin with Vue 3. It won't work. You may notice that third-party Vue 2 plugins either have a mention of Vue 3 version on main page, or there's a discussion of Vue 3 in issues. — Estus Flask
– Estus Flask, Commented Jun 30, 2021 at 19:01

tony19 · Accepted Answer · 2022-09-06 19:21:27Z

1

v-mask is built for Vue 2, so you can't use it in Vue 3 (unless you use the migration build, but that's not really intended for third party plugins).

Consider using maska, which is a masking library that supports Vue 3:

npm i -S maska

Example usage:

import { createApp } from 'vue'
import App from './App.vue'
import Maska from 'maska'

createApp(App).use(Maska).mount('#app')

demo

edited Sep 6, 2022 at 19:21

answered Jul 2, 2021 at 8:32

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrey Sushenkov · Accepted Answer · 2021-07-01 05:48:26Z

0

try to save the app in a variable and execute use for app

import { createApp } from 'vue'

import App from './App.vue'
import VueMask from 'v-mask'

const app = createApp(App)
app.use(VueMask)
app.mount('#app')

edited Jul 1, 2021 at 5:48

answered Jun 30, 2021 at 17:56

Andrey Sushenkov

11 bronze badge

3 Comments

liewife Over a year ago

now it shows blank page and console gives and error: "Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is undefined"

Andrey Sushenkov Over a year ago

@ligwol ok, try to keep a return value from createApp and after that use use I updated the original message

Andrey Sushenkov Over a year ago

@ligwol hmmmm, Estus Flask was right. It's not an incompatible library for Vue3. But you can try to migrate it like here alvarosaburido.dev/blog/…

Collectives™ on Stack Overflow

How to initialize npm package in vue

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related