intlayer-vue
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>
References
More from aymericzip/intlayer-skills
intlayer-react
Integrates Intlayer internationalization with React component. Use when the user asks to "setup React i18n", create a new translated component, use the "useIntlayer" hook, or configure providers.
24intlayer-config
Configures Intlayer project settings and environment variables. Use when the user asks to "setup intlayer.config", "configure locales", or "customize Intlayer settings".
21intlayer-content
Define rich content structures using Intlayer content nodes. Use when the user asks to "create translations", "handle pluralization", "use markdown in content", or implement "conditional content".
21intlayer-usage
Provides general guidelines for using Intlayer in any project. Use when the user asks to "get started with Intlayer", "declare content files", or understand the "project structure" for internationalization.
18intlayer-cli
Manages Intlayer dictionaries and configuration via the Command Line Interface. Use when the user asks to "audit translations", "build dictionaries", "sync content", or run "intlayer" commands.
16intlayer-compiler
Intlayer Compiler setup and usage. Configures automatic content extraction for your components without the need to define .content files manually.
15