@intlayer/chokidar
Version:
Uses chokidar to scan and build Intlayer declaration files into dictionaries based on Intlayer configuration.
57 lines (46 loc) • 1.57 kB
Markdown
---
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: contact@intlayer.org
---
# Intlayer Vue Usage
## Setup
- [Vite and Vue](https://intlayer.org/doc/environment/vite-and-vue.md)
- [Nuxt and Vue](https://intlayer.org/doc/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](https://intlayer.org/doc/packages/vue-intlayer/exports.md)
## References
- [Website](https://intlayer.org)
- [Doc](https://intlayer.org/doc)
- [Vite and Vue](https://intlayer.org/doc/environment/vite-and-vue.md)
- [Nuxt and Vue](https://intlayer.org/doc/environment/nuxt-and-vue.md)
- [Vue Intlayer Exports](https://intlayer.org/doc/packages/vue-intlayer/exports.md)
- [Intlayer Exports](https://intlayer.org/doc/packages/intlayer/exports.md)