intlayer-vue

name	intlayer-vue
description	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.
metadata	{"author":"Intlayer","url":"https://intlayer.org","license":"Apache-2.0","mcp-server":"@intlayer/mcp","category":"productivity","tags":["i18n"],"documentation":"https://intlayer.org/doc","support":"[e-mail]"}

Intlayer Vue Usage

Setup

• Vite and Vue
• Nuxt and Vue

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

References

• Website

• Doc

• Vite and Vue

• Nuxt and Vue

• Vue Intlayer Exports

• Intlayer Exports