Intl in your dopeass Vue 3 apps 👨🔧
Try every component live at v-intl.vinayakkulkarni.dev. Pick a locale and the whole page re-formats.
pnpm add @vinayakkulkarni/v-intl<script setup lang="ts">
import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
const format = {
locales: 'de-DE',
options: { style: 'currency', currency: 'EUR' },
};
</script>
<template>
<!-- 123.456,79 € -->
<VIntlNumberFormat :payload="123456.789" :format="format" />
</template>Every component takes the same props:
| Prop | Type | Notes |
|---|---|---|
payload |
depends on the component (see below) | Required. |
format |
{ locales, options } |
options is the matching Intl.*Options object. |
wrapper |
string |
Class for the wrapping <div>. |
toParts |
boolean |
Return formatToParts() output where supported. |
To register all components globally, use the plugin: app.use(VIntl) with import VIntl from '@vinayakkulkarni/v-intl'.
The package exposes 6 Intl components, viz.,
| Formatter | What it does? | More Info |
|---|---|---|
| VIntlListFormat | Enables language-sensitive list formatting. | Read More |
| VIntlNumberFormat | Enable language sensitive number formatting. | Read More |
| VIntlDateTimeFormat | Formats the Date & Time. | Read More |
| VIntlRelativeTimeFormat | Create a relative time formatter in specified locale. | Read More |
| VIntlDisplayNames | Translates region, language, currency, script. | Read More |
| VIntlDurationFormat | Enables language-sensitive duration formatting. | Read More |
They're are tree-shakable, meaning, you don't need to bulk up your bundle by including all the components. I've tried to keep the API as consistent as possible.
v-intl © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k
- v-clappr — Vue 3 wrapper for the Clappr media player
- v-pip — picture-in-picture for Vue 3
- v-spotlight — cursor spotlight overlay for Vue 3
- v-image — Vue 3 image input with live preview
- nxui — animated copy-paste UI components and Paper Shaders for Vue 3 and Nuxt
- shadscan-vue — UI-fundamentals audits for shadcn-vue and shadcn-nuxt apps
See every project at vinayakkulkarni.dev/projects and geoql.in.
