intlayer-vue

Integrates Intlayer internationalization with Vue.js and Nuxt applications. Use when the user asks to "setup Vue i18n", use the "useIntlayer" composable, or manage translations in Vue components.

Intlayer Vue Usage

Setup

useIntlayer Composable

<script setup>
import { useIntlayer } from "vue-intlayer";
const content = useIntlayer("my-dictionary-key");

console.log(content.title.raw); // Render as raw
</script>
<template>
  <div>
    <h1>
      <!-- Render the visual editor -->
      <content.title />
    </h1>
    <h1>
      <!-- Render as string -->
      {{ content.title }}
    </h1>
    <img :src="content.image.src" :alt="content.image.alt" />
  </div>
</template>

Vue Documentation

Compiler

The Intlayer Compiler can extract all your content keys from your components, using one CLI command (npx intlayer extract) or automatically at app build.

It activates once compiler.enabled and compiler.output are set: .svelte files additionally require @intlayer/vue-compiler.

intlayer-vue

Intlayer Vue Usage

Setup

useIntlayer Composable

Compiler

References

Environments

Concepts

Packages