The CWA is in heavy development
The CWA is still in alpha and not ready for production - some code and implementations are likely to change. If you would like to try out the CWA, please enjoy what we have provided and feel free to provide feedback, or get involved on GitHub.
Cwa Components
<CwaLink />
A smart link component that uses NuxtLink for internal URLs and opens external URLs in a new tab.
<CwaLink> is a drop-in replacement for <NuxtLink> that handles both internal and external URLs correctly. Internal paths render as <NuxtLink> for client-side navigation; external URLs open in a new tab automatically.
<CwaLink to="https://example.com">Visit Example</CwaLink>
<CwaLink to="/about">About us</CwaLink>
Props
<CwaLink> accepts the same props as <NuxtLink> (the full NuxtLinkProps type), with the exception of href, rel, and noPrefetch which are omitted. Use to instead of href.
| Prop | Type | Default | Description |
|---|---|---|---|
to | string | RouteLocationRaw | — | The target URL or route. Internal paths use <NuxtLink>; external URLs get target="_blank" automatically. |
target | string | _blank external, _self internal | Override the link target. |
prefetch | boolean | false | Whether to prefetch the linked route on hover/visibility. Disabled by default to prevent duplicate API calls when many links are visible simultaneously (e.g. a navigation menu). Set :prefetch="true" on individual links where prefetching is desirable. |
Usage
Use <CwaLink> anywhere you have a link that might be either internal or external — for example in a navigation component where the admin sets the URL:
<template>
<nav>
<CwaLink
v-for="item in navItems"
:key="item.to"
:to="item.to"
class="text-sm font-medium hover:text-primary-500"
>
{{ item.label }}
</CwaLink>
</nav>
</template>
In Rich Text
When rendering HTML from a rich-text component, useHtmlContent automatically replaces any <a> tags in the rendered HTML with <CwaLink> so internal links navigate without a full page reload. See useHtmlContent.