CWA 2 is a prerelease (2.0.0-alpha), heading for a beta. It runs production sites; configuration can still change between releases, always with upgrade notes. View versions and support
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 HTML Content.