Components
Input
Text input with optional mask support via maska config.
Usage
Use the Input component to capture text. Pass a mask prop with a maska config object to enable masking (no predefined presets; you define your own).
Loading preview...
<template>
<div class="flex flex-col gap-4 max-w-xs">
<MeInput placeholder="Default input" />
<MeInput v-model="phone" :mask="phoneMask" placeholder="(00) 00000-0000" />
</div>
</template>
<script setup lang="ts">
const phone = ref('')
const phoneMask = { mask: '(##) #####-####' }
</script>
With mask
Pass your own maska config via the :mask prop (e.g. phone, CNPJ, date). Use a maska config object.
Mask tokens (default)
| Token | Type | Description |
|---|---|---|
# | Number | Allows only digits (0-9) |
@ | Letter | Allows only letters (a-z, A-Z) |
* | Alphanumeric | Allows letters or digits |
! | Escape | Use before a token to use it literally in the mask (e.g. !# for a literal #) |
Custom tokens can be defined via the tokens option in the mask config.
<template>
<MeInput v-model="phone" :mask="phoneMask" placeholder="(00) 00000-0000" />
</template>
<script setup lang="ts">
const phone = ref('')
const phoneMask = { mask: '(##) #####-####' }
</script>
Example for CNPJ (numeric or alphanumeric): use a config with custom tokens, e.g. { mask: 'NN.NNN.NNN/NNNN-##', tokens: { N: { pattern: /[0-9A-HJ-NPR-Z]/, transform: v => v.toUpperCase() } } }
Variant and color
MeInput accepts the same Nuxt UI Input props (variant, color, size, etc.).
<template>
<div class="flex flex-wrap gap-2">
<MeInput variant="outline" color="primary" placeholder="Outline primary" />
<MeInput variant="subtle" color="neutral" placeholder="Subtle neutral" />
</div>
</template>
API
Props
Inherits all Nuxt UI Input props, plus:
| Prop | Default | Type |
|---|---|---|
mask | undefined | Record<string, unknown> - Maska config object (e.g. { mask: '...', tokens: {} }). When omitted, the input has no mask. |
Slots
| Slot | Type |
|---|---|
leading | {} |
default | {} |
trailing | {} |