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/composables/cwa-resource'
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, content)
defineExpose(exposeMeta)
</script>
Pass container — a template ref pointing to the element that receives the v-html content — and content, the HTML source itself. useHtmlContent walks the container's DOM, finds <a> elements, and mounts <CwaLink> components in their place, re-running whenever either the element or the HTML changes.
<a> tags, and those internal links then cause full page loads. This bites whenever a field can change in place: an inline editor, or a resource updated over Mercure.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 - Unmounts the replacement link apps before re-converting, and again when the parent component unmounts
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.