Vue 3+
Vue 3 is offically supported by the library. You need to install a vue plugin into your app which will provide the currently active locale and then you can use the built-in or the genereted hook (via the global seeder).
Installation
pnpm add @ardinsys/intl @ardinsys/intl-vuenpm install @ardinsys/intl @ardinsys/intl-vueUsage
We will show how to use the integration with the global seeder, since this is the preferred way. Usually you need messages that are available in every component, but even if you don't, you surely don't want to repeat your number and date formats in every component, or always import them separately.
Lets assume @/ is an alias for your src folder.
In your application you could create an internalization/index.ts file where you can create your seeded instance:
import { createSeededIntl } from "@ardinsys/intl-vue";
// createIntl is the vue plugin
// useIntl is the properly typed hook based on the bundles
export const { createIntl, useIntl } = createSeededIntl(seedBundles);To see what seedBundles is please refer to the Quick start guide
Adding the plugin
In your entrypoint, install the plugin you got.
import { createApp } from "vue";
import { createIntl } from "@/internalization";
// Specify the default locale
createApp().use(createIntl("en")).mount("#app");Adding the plugin in Nuxt
In your apps/plugin/intl.ts, define a nuxt plugin which will inject the vue plugin into the client.
import { createIntl } from "../../internalization";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(createIntl("en"));
});Using the hook in components
Now you can just import the hook into your components and use it with global data already available everywhere:
<script setup lang="ts">
import { useIntl } from "@/internalization";
const { t } = useIntl({
en: {
messages: {
test: "This is a message from {name}",
},
},
hu: {
messages: {
test: "Ez egy üzenet tőle {name}",
},
},
} as const);
</script>
<template>
<div>{{ t("test", { name: "John" }) }}</div>
</template>Component interpolation
Use <Translation> to insert Vue markup/components into translated strings. Placeholders in the message are replaced by slots.
Named placeholders
<script setup lang="ts">
import Translation from "@ardinsys/intl-vue";
import { useIntl } from "@/internalization";
const intl = useIntl({
en: { messages: { hello: "Hello {name}!" } },
hu: { messages: { hello: "Szia {name}!" } },
} as const);
</script>
<template>
<Translation :intl="intl" path="hello">
<template #name>
<strong>John</strong>
</template>
</Translation>
</template>Positional placeholders
{0}, {1} and other index based placeholder will be filled from the default slot content.
<script setup lang="ts">
import Translation from "@ardinsys/intl-vue";
import { useIntl } from "@/internalization";
const intl = useIntl({
en: {
messages: {
docs: "Read {0} and {1}.",
terms: "Terms",
privacy: "Privacy",
},
},
} as const);
const { t } = intl;
</script>
<template>
<Translation :intl="intl" path="docs">
<a href="/terms">{{ t("terms") }}</a>
<a href="/privacy">{{ t("privacy") }}</a>
</Translation>
</template>Using in Razor or in other MPAs
Installation
If you are using razor, you should put this in your _Layout.cshtml
<head>
<!-- Alter versions as you see fit -->
<script src="https://unpkg.com/vue@3.5.24"></script>
<script src="https://unpkg.com/@ardinsys/intl"></script>
<script src="https://unpkg.com/@ardinsys/intl-vue"></script>
</head>Creating internalization
In your page file (like Home.cshtml) at the end of the body (typically @section Scripts { HERE } in razor) setup the vue app:
const { createApp } = Vue;
const { createSeededIntl } = ardinIntlVue;
// createIntl is the vue plugin
// useIntl is the properly typed hook based on the bundles
const { createIntl, useIntl } = createSeededIntl({
en: {
messages: {
test: "This is a message from {name}",
},
},
hu: {
messages: {
test: "Ez egy üzenet tőle {name}",
},
},
});
// Specify the default locale
createApp().use(createIntl("en")).mount("#app");
const { t, n, c, d, locale, setLocale } = useIntl();Using it in your cshtml template
For a more detailed explanation of what each function does (t, n, c, d) see the Locale bundle format.
<div v-on:click="setLocale(locale() == 'hu' ? 'en' : 'hu')">
Current locale is: {{ locale() }}, Click to change
</div>
<!-- These will be automatically updated on locale change -->
<span> {{ t("test", { name: "John" }) }} </span>
<span> {{ n(12345) }} </span>
<span> {{ c(12345, "USD") }} </span>
<span> {{ d(new Date()) }} </span>