Intlayer Vue

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.

aymericzip f483d71 6 files · 79.4 KB Updated

File contents

Intlayer Vue Usage

Setup

  • Vite and Vue
  • Nuxt and Vue

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

  • Website

  • Doc

  • Vite and Vue

  • Nuxt and Vue

  • Vue Intlayer Exports

  • Intlayer Exports

aymericzip/intlayer-skills/tree/main/skills/intlayer-vue commit f483d71869

Frequently asked questions

npx skillmds@latest add aymericzip/intlayer-vue