Vue

A dedicated @localess/vue package is on the roadmap. Until it ships, integrate Vue with Localess in two pieces: fetch content with the framework-agnostic JavaScript client, and wire up the Visual Editor with the browser sync script.

A dedicated @localess/vue package is on the roadmap. Until it ships, integrate Vue with Localess in two pieces: fetch content with the framework-agnostic JavaScript client, and wire up the Visual Editor with the browser sync script.

1. Fetch content

Use @localess/client on the server (Nuxt server routes, asyncData, an API route, etc.) so your API token never reaches the browser.

// server/api/page.ts (Nuxt example)
import { localessClient } from "@localess/client";

const client = localessClient({
  origin: process.env.LOCALESS_ORIGIN!,
  spaceId: process.env.LOCALESS_SPACE_ID!,
  token: process.env.LOCALESS_TOKEN!,
});

export default defineEventHandler(async (event) => {
  const { slug, locale } = getQuery(event);
  return client.getContentBySlug(String(slug), { locale: locale as string });
});

In your component, fetch through that endpoint and render the data. Generate TypeScript types with the CLI for full type safety.

2. Enable the Visual Editor (optional)

Inject the sync script from your Nuxt config or top-level layout. Replace LOCALESS_ORIGIN with your instance URL:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          id: "localess-js-sync",
          type: "text/javascript",
          async: true,
          src: `${process.env.LOCALESS_ORIGIN}/scripts/sync-v1.js`,
        },
      ],
    },
  },
});

Subscribing to edit events

Subscribe to Visual Editor events and update reactive state. Mark editable elements with localessEditable and localessEditableField from @localess/client:

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { localessEditable, localessEditableField } from "@localess/client";
import type { ContentData } from "@localess/client";

const props = defineProps<{ initialData: ContentData }>();
const pageData = ref<ContentData>(props.initialData);

onMounted(() => {
  if (window.localess) {
    window.localess.on(["input", "change"], (event) => {
      if (event.type === "input" || event.type === "change") {
        pageData.value = event.data;
      }
    });
  }
});
</script>

<template>
  <section v-bind="localessEditable(pageData)">
    <h1 v-bind="localessEditableField('title')">{{ pageData.title }}</h1>
  </section>
</template>

See Visual Editor for the full event list and attribute reference.

Roadmap

@localess/vue will ship with the same surface as @localess/react — LocalessComponent, useLocaless (composable), localessEditable, and a rich-text renderer. Track progress on GitHub.

1. Fetch content

2. Enable the Visual Editor (optional)

Subscribing to edit events

Roadmap

On this page