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
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.
38intlayer-config
Configures Intlayer project settings and environment variables. Use when the user asks to "setup intlayer.config", "configure locales", or "customize Intlayer settings".
36intlayer-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".
34intlayer-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.
2intlayer-compiler
Intlayer Compiler setup and usage. Configures automatic content extraction for your components without the need to define .content files manually.
2intlayer-next-js
Integrates Intlayer internationalization with Next.js App Router and Pages Router. Use when the user asks to "setup Next.js i18n", use "useIntlayer" in Server Components, or handle client-side translations in Next.js.
1