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)
defineExpose(exposeMeta)
</script>
Pass container — a template ref pointing to the element that receives the v-html content. On mount (and again whenever the container element itself is replaced), useHtmlContent walks the container's DOM, finds <a> elements, and mounts <CwaLink> components in their place.
:key="content") when the 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 - Stops watching the container on unmount (the replacement link apps are torn down with the parent component's DOM)
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.