Vue

Install

npm install @localive/vue @localive/adapter-vue-i18n @localive/vite vue-i18n

Register the Localive Plugin

createLocalivePlugin is a factory — you call it with options, then pass the returned plugin to app.use(). There is no LocalivePlugin class:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { createLocalivePlugin, LiveEditorOverlay } from '@localive/vue';
import { withVueI18n } from '@localive/adapter-vue-i18n';
import App from './App.vue';
import en from './locales/en.json';
import fr from './locales/fr.json';

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, fr },
});

const localive = createLocalivePlugin({
  adapter: withVueI18n(i18n.global),
  locales: ['en', 'fr', 'de'],
  defaultLocale: 'en',
});

const app = createApp(App);
app.use(i18n);
app.use(localive);
app.mount('#app');

Tag Elements with v-localive-tag

The v-localive-tag directive sets the data-i18n-key attribute on the element so the overlay can resolve clicks to a translation key:

<template>
  <nav>
    <a v-localive-tag="'nav.home'">{{ t('nav.home') }}</a>
    <a v-localive-tag="'nav.about'">{{ t('nav.about') }}</a>
  </nav>
</template>

Show the Editor Overlay

LiveEditorOverlay takes no props — it reads the Localive instance from the injected localiveSymbol. Render it anywhere inside the component tree where the plugin is installed:

<template>
  <div>
    <RouterView />
    <LiveEditorOverlay />
  </div>
</template>

<script setup>
import { LiveEditorOverlay } from '@localive/vue';
</script>

Toggle the Inspector

Vue’s useLocaliveEditor takes the I18nLiveInstance as an argument (unlike React, which reads it from context). inject(localiveSymbol) returns the instance, then pass it to the hook. isActive is a Ref<boolean>:

<template>
  <button @click="toggle">
    {{ isActive ? '✕ Close editor' : '✎ Open editor' }}
  </button>
</template>

<script setup>
import { inject } from 'vue';
import { useLocaliveEditor, localiveSymbol } from '@localive/vue';

const instance = inject(localiveSymbol);
const { isActive, activate, deactivate, toggle, getTranslation } = useLocaliveEditor(instance);
</script>

Vue’s useLocaliveEditor returns the same five fields as React’s: isActive, activate, deactivate, toggle, getTranslation. To switch locales, use your i18n library (i18n.global.locale.value = 'fr'); Localive observes the change through the adapter.

Next Steps

• Dev Server Plugin — write-edits-to-disk on save
• CLI Tools — extract, validate, sync, generate types
• Auto-Tagging Concept — how data-i18n-key is resolved