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().

An out-of-range or fractional w, h or q throws a TypeError before the URL is built. For the untouched uploaded file, or to force a browser download, use the original and download links described below rather than a transform parameter.

See Image Transforms for the full parameter reference.

Original file and download links

A bare assetLink(asset) URL is a rendition, not the uploaded file: still images are re-encoded at their format's default quality even with no parameters. When you need the exact bytes that were uploaded, or want the browser to save the file instead of displaying it, use the client's assetOriginalLink() and assetDownloadLink():

<template>
  <a :href="client.assetOriginalLink(props.data.image)">View the original file</a>
  <a :href="client.assetDownloadLink(props.data.brochure)" download>Download</a>
</template>

Neither accepts transform parameters. A request that adds any is rejected with 400. Downloads keep non-ASCII file names intact.

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