How do I set up Vue i18n with Intlayer Vue?

Install the library, import useIntlayer from 'vue-intlayer', and use the composable with your dictionary key in a Vue or Nuxt component.

How do I render the translation as a visual editor?

Use the template syntax to render the editor-based translation.

How do I render the translation as a string?

Use the interpolation syntax {{ content.title }} in your template to display the translation as a string.

intlayer-vue

npx machina-cli add skill aymericzip/intlayer-skills/intlayer-vue --openclaw

Files (1)

SKILL.md

1.4 KB

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

References

Source

git clone https://github.com/aymericzip/intlayer-skills/blob/main/skills/intlayer-vue/SKILL.mdView on GitHub

Overview

Intlayer Vue usage provides a straightforward integration of Intlayer internationalization with Vue.js and Nuxt apps. It centers on the useIntlayer composable to fetch translations and render either raw editor data or plain strings within components.

How This Skill Works

In a Vue or Nuxt component, call useIntlayer with your dictionary key (e.g., const content = useIntlayer('my-dictionary-key')). The returned object exposes fields like content.title and content.image, which can be rendered as a visual editor (<content.title />) or as a string ({{ content.title }}). This approach aligns with Vue's composition API for easy binding in templates.

When to Use It

When asked to set up Vue i18n in a Vue 3 or Nuxt app
When you need to fetch a translation dictionary within a component via useIntlayer
When you want to render a translation as a visual editor using <content.title />
When you want to display translations as plain strings in templates ({{ content.title }})
When your translation data includes media like images (content.image.src / content.image.alt)

Quick Start

Step 1: Install the library and import useIntlayer from "vue-intlayer" in your Vue/Nuxt project
Step 2: In a <script setup> block, initialize const content = useIntlayer("my-dictionary-key");
Step 3: In your template, render the editor with <content.title /> or a string with {{ content.title }}, and bind images with :src and :alt

Best Practices

Use the useIntlayer composable inside a <script setup> block for clean bindings
Access content.title.raw for the editor data and content.title for string rendering
Bind media assets with content.image.src and content.image.alt for accessibility
Ensure the dictionary key exists and is loaded before rendering
Follow the Vite or Nuxt environment guidance referenced in the docs

Example Use Cases

Nuxt 3 page displaying a translated title with a visual editor: <content.title />
Vue 3 component rendering a translation as a string: {{ content.title }}
Component logs content.title.raw to inspect editor data during development
Demo page using Vite + Vue to fetch translations via useIntlayer('my-dictionary-key')
Component demonstrates image translation rendering with :src="content.image.src" and :alt="content.image.alt"

Frequently Asked Questions

Add this skill to your agents