@desource/phone-mask-nuxt

> Nuxt module for phone input with Google's libphonenumber data


Drop-in Nuxt module with auto-imports, SSR support, and zero configuration.

✨ Features

- 🎯 Zero Config — Works out of the box
- 🔄 Auto-imports — Components and composables
- 🌐 SSR Compatible — Server-side rendering ready
- 🎨 Styleable — Bring your own styles or use defaults
- 🔧 TypeScript — Fully typed
- ⚡ Optimized — Tree-shaking and code splitting

📦 Installation

``bash
npm install @desource/phone-mask-nuxt


or

Add the module to your nuxt.config.ts:

`ts
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt']
});
`

That's it! The component and directive are now auto-imported.

📖 Usage

$3

`vue



`

$3

`vue



`

$3

`vue



`

⚙️ Configuration

$3

Configure the module in nuxt.config.ts:

`ts
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt'],

phoneMask: {
// Import styles automatically
css: true, // Default: true

// Register PhoneInput component
component: true, // Default: true

// Register v-phone-mask directive
directive: true, // Default: true

// Register shared helpers and types
helpers: true // Default: true
}
});
`

$3

#### Option 1: Disable auto CSS import

`ts
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt'],

phoneMask: {
css: false // Don't auto-import styles
}
});
`

Then import manually where needed:

`vue

`

#### Option 2: Override CSS variables

`vue

`

🔧 TypeScript

The module provides automatic TypeScript support. Types are available globally:

`ts
// Auto-imported types
import type {
PCountryKey,
PMaskBase,
PMaskBaseMap,
PMask,
PMaskMap,
PMaskWithFlag,
PMaskWithFlagMap,
PMaskFull,
PMaskFullMap,
PMaskPhoneNumber
} from '#phone-mask';
`

📚 Examples

$3

`vue



`

$3

`ts
// stores/user.ts
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
state: () => ({
phoneDigits: '',
country: 'US'
}),

actions: {
setPhoneDigits(phone: string) {
this.phone = phone;
},

setCountry(id: string) {
this.country = id;
}
}
});
`

`vue



`

$3

`vue



`

$3

`vue



`

🎯 Auto-imports

The following are automatically imported (until disabled in nuxt.config.ts):

$3

- PhoneInput — Main phone input component

$3

- vPhoneMask — Phone mask directive

$3

- vPhoneMaskSetCountry — Programmatically set country for directive
- PMaskHelpers — Utility functions for phone masks like:
- getFlagEmoji
- countPlaceholders
- formatDigitsWithMap
- pickMaskVariant
- removeCountryCodePrefix
- And more...

Read more about helpers in the Utility Functions of @desource/phone-mask README.

$3

All TypeScript types from @desource/phone-mask-vue

🔄 Migration from Vue Plugin

If you're migrating from the Vue plugin:

Before:

`ts
// main.ts
import PhoneMaskPlugin from '@desource/phone-mask-vue';
import '@desource/phone-mask-vue/style.css';

app.use(PhoneMaskPlugin);
`

After:

`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@desource/phone-mask-nuxt']
});
`

No changes needed in your components!

📦 What's Included

- PhoneInput component (auto-imported)
- vPhoneMask` directive (auto-imported)
- Default styles (auto-imported, can be disabled)
- TypeScript definitions (auto-imported)
- Utility functions (auto-imported)

🔗 Related

- @desource/phone-mask — Core library
- @desource/phone-mask-vue — Vue 3 component

📄 License

MIT © 2025 DeSource Labs

🤝 Contributing

See Contributing Guide

---