---
name: aymericzip-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."
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "8967b6eb-a1f1-464b-9f01-cece5eb8a3ff"
  decimalai-version-id: "71edc937-ab0a-4b62-9906-cc92b893d64f"
  decimalai-version: "2"
  decimalai-body-sha256: "d64325ce3eada23421ab6fbedfb2081c3f2b3d29f028301041ae46496db7189a"
  decimalai-name: "aymericzip/intlayer-vue"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/aymericzip-intlayer-vue@2/SKILL.md"
---
# Intlayer Vue Usage

## Setup

- [Vite and Vue](references/environment_vite-and-vue.md)
- [Nuxt and Vue](references/environment_nuxt-and-vue.md)

## useIntlayer Composable

```vue
<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/packages_vue-intlayer_exports.md)

## Bundle Optimization

Read content fields by name (dot access or destructuring) so the build can purge and minify the dictionary. Never index content at runtime (`content.statuses[status]`, use `select()`), and call `useIntlayer` in each child component instead of passing content as a prop. See the `intlayer-bundle-optimization` skill.

## Compiler

The [Intlayer Compiler](references/compiler.md) 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`.

## References

- [Website](https://intlayer.org)
- [Doc](https://intlayer.org/doc)

### Environments

- [Vite and Vue](references/environment_vite-and-vue.md)
- [Nuxt and Vue](references/environment_nuxt-and-vue.md)
- [Astro and Vue](references/environment_astro_vue.md)

### Concepts

- [Variants](references/concept_variants.md)
- [Collections](references/concept_collections.md)
- [Compiler](references/compiler.md)
- [Formatters (number, currency, date, …)](references/formatters.md)

### Packages

- [Vue Intlayer Exports](references/packages_vue-intlayer_exports.md)
- [Intlayer Exports](references/packages_intlayer_exports.md)
- [nuxt-intlayer Exports](references/packages_nuxt-intlayer_exports.md)
- [vue-intlayer usePathname](references/packages_vue-intlayer_usePathname.md)
- [vue-intlayer useRewriteURL](references/packages_vue-intlayer_useRewriteURL.md)