HTML Content

Rich-text components (e.g. a WYSIWYG or markdown-rendered field) output raw HTML containing <a> tags. Rendering that HTML with v-html works, but <a> tags cause full-page reloads for internal links. useHtmlContent solves this by replacing every <a> tag in the container with a <CwaLink> Vue component after mount.

Usage

<!-- app/cwa/components/RichText/RichText.vue -->
<template>
    <div ref="container" class="prose" v-html="content" />
</template>

<script setup lang="ts">
import { computed, ref, toRef } from 'vue'
import type { IriProp } from '@cwa/nuxt/runtime/composables'
import { useCwaResource, useHtmlContent } from '#imports'

const props = defineProps<IriProp>()

const { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'))
const resource = getResource()

const content = computed(() => resource.value?.data?.content ?? '')

const container = ref<HTMLElement | null>(null)
useHtmlContent(container)

defineExpose(exposeMeta)
</script>

Pass container — a template ref pointing to the element that receives the v-html content. After mount and on each update, useHtmlContent walks the container's DOM, finds <a> elements, and mounts <CwaLink> components in their place.

What It Does

• Finds every <a href="..."> inside the container
• Creates a <CwaLink> Vue component instance for each
• Mounts it as a replacement — internal paths get <NuxtLink> behaviour, external URLs open in a new tab
• Cleans up on unmount

When to Use It

Use useHtmlContent for any component that renders HTML strings from the API into the page — rich-text editors, markdown output, or any field where the content author controls anchor tags. Without it, every internal link causes a hard navigation.