Reference

Assets

There's no standalone asset-resolving helper. Use the client's assetLink() method, which builds a fully qualified URL from the configured origin and spaceId — never construct asset URLs by hand:

<script setup lang="ts">
import { type LocalessSchemaProps } from '@localess/vue';

import type { HeroSection } from '#shared/models/localess';

const props = defineProps<LocalessSchemaProps<HeroSection>>();
const client = useLocaless();
</script>

<template>
  <img :src="client.assetLink(props.data.image)" :alt="props.data.imageAlt" />

  <!-- With transform parameters -->
  <img :src="client.assetLink(props.data.image, { w: 800, h: 600, q: 70, f: 'webp' })" alt="" />
</template>

In a server route, call the same method on useLocalessServerClient().

See Image Transforms for the full parameter reference.

Rich Text

<LocalessRichText> is auto-imported and renders a rich text field to native Vue VNodes — no Tiptap dependency at runtime, and no v-html:

<template>
  <LocalessRichText :content="props.data.body" />
</template>

The composable forms are auto-imported too: useLocalessRichText(doc, options?) returns a reactive ComputedRef<VNodeChild>, and useLocalessRichTextHtml(doc, options?) returns a ComputedRef<string> for a v-html binding. One-shot, non-reactive equivalents are renderRichText and renderRichTextToHtml.

Supported elements

An unknown node is skipped and an unknown mark renders its children unwrapped, each with a one-time console.warn outside production — so a document authored against a newer Localess release degrades instead of throwing.

Overriding a renderer

Overrides are Vue components receiving the node's children as their default slot:

<LocalessRichText :content="props.data.body" :renderers="{ link: AppLink }" />

Declare the props your override consumes, or set inheritAttrs: false, so unconsumed node attributes don't fall through onto the rendered element.

Rendering is shared across every Localess SDK by @localess/richtext, so one document renders identically in Nuxt, React, Angular, Svelte, and Astro.

Links

findLink isn't re-exported — import it from @localess/client. It's a pure function with no client instance behind it, so it's safe anywhere:

<script setup lang="ts">
import { findLink } from '@localess/client';
import { type LocalessSchemaProps } from '@localess/vue';

import type { NavLink } from '#shared/models/localess';

const props = defineProps<LocalessSchemaProps<NavLink>>();
</script>

<template>
  <NuxtLink :to="findLink(props.links, props.data.link)">{{ props.data.label }}</NuxtLink>
</template>

Error handling

getContentBySlug/getContentById throw LocalessApiError on a non-2xx response. Check error.status to turn a missing slug into Nuxt's own 404:

// server/api/content.ts
import { LocalessApiError } from '@localess/vue';
import { useLocalessServerClient } from '#localess/server';

export default defineEventHandler(async event => {
  const client = useLocalessServerClient();
  const slug = (getQuery(event).slug as string) || 'home';

  try {
    return await client.getContentBySlug(slug);
  } catch (error) {
    if (error instanceof LocalessApiError && error.status === 404) {
      throw createError({ statusCode: 404, statusMessage: `Content not found for slug "${slug}".` });
    }
    throw error;
  }
});

Re-raise it on the page so Nuxt renders its error page rather than an empty layout:

const { data: content, error } = await useAsyncData('content', () => $fetch('/api/content'));

if (error.value) {
  throw createError({ statusCode: error.value.statusCode ?? 500, statusMessage: error.value.statusMessage, fatal: true });
}

Module setup errors

The module validates its config at build time and fails fast rather than at the first request:

Module Reference

Options (nuxt.config.ts → localess)

componentNaming, componentsDir, and components are resolved when the registry is generated at build time — they add nothing to the runtime config.

Runtime config shape

Both are overridable at runtime with Nuxt's standard NUXT_* environment variables.

@localess/nuxt/server

Import it through the #localess/server alias the module registers, which resolves in both the app and Nitro build graphs.

Auto-imported from @localess/vue

Everything else — LocalessApiError, localessClient, and the LocalessSchemaProps / Content / ContentData types — is imported from @localess/vue explicitly — see packages/vue for its complete export list.

Module types