Replies: 10 comments 41 replies
-
Awesome! From my understanding, Nuxt 3 already provides a I don't have much knowledge about prefetching Nuxt payloads as I never had the opportunity to dive into Nuxt 2 The latter might be of some help/inspiration while creating Nuxt 3 |
Beta Was this translation helpful? Give feedback.
-
@lihbr That would be great! That agnostic behaviour is exactly what we'd like to include in |
Beta Was this translation helpful? Give feedback.
-
I second this. Indeed the goal is to make |
Beta Was this translation helpful? Give feedback.
-
Here's a first naive/draft specs for it, take it mainly as a bundle of ideas regarding the new Labels are going as follows:
OverviewThis document presents the specifications (specs) of a Background InformationNuxt 2 provides a link component for internal links that extends Vue Router's As of today, Nuxt 3 link component is just a reexport of Vue Router's SpecificationsThe following describes how Nuxt 3 Additionally, a
InterfacesPropsThe type NuxtLinkProps = {
// Routing
to?: string;
href?: string;
// Attributes
blank?: boolean;
target?: string;
rel?: string;
// Prefetching
prefetch?: boolean;
noPrefetch?: boolean;
// Styling
activeClass?: string;
exactActiveClass?: string;
prefetchedClass?: string;
// Vue Router's `<RouterLink>` additional props
replace?: boolean;
ariaCurrentValue?: string;
// Edge cases handling
external?: boolean;
internal?: boolean;
}; Nuxt configuration
The following props can be configured globally inside Nuxt config import { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
router: {
prefetchLinks: false, // defaults to `true`
linkExternalRelAttribute: "noopener", // defaults to `"noopener noreferrer"`
linkActiveClass: "foo", // defaults to `router-link-active`
linkExactActiveClass: "bar", // defaults to `router-link-exact-active`
linkPrefetchedClass: "baz", // defaults to `router-link-prefetched`
},
}); PropsRouting
|
Beta Was this translation helpful? Give feedback.
-
The NuxtLink should be extendable like RouterLink |
Beta Was this translation helpful? Give feedback.
-
@lihbr is there any updates on this one ? thanks for your great work by the way |
Beta Was this translation helpful? Give feedback.
-
@lihbr This looks great to me too, as is, with the following comments.
|
Beta Was this translation helpful? Give feedback.
-
Currently migrating from nuxt 2 to nuxt 3, my <NuxtLink to="/blog">blog</NuxtLink> On |
Beta Was this translation helpful? Give feedback.
-
Please tell me how to use an active link inside a post in Nuxt 3 - Content 2 <NuxtLink active-class="active" :to="link.url" v-for="(link, index) in navigation" :key="index">
{{ link.name }}
</NuxtLink>
|
Beta Was this translation helpful? Give feedback.
-
Be careful when using $route.path.startsWith(route.path) |
Beta Was this translation helpful? Give feedback.
-
Nuxt 2 has a build-in
NuxtLink
that is basically a wrapper over<RouterLink>
with some improvements like page smart prefetching. We shall support t for Nuxt 3 as a built-in app component:RouterLink
whenpages/
directory enabledRouterLink
Some more ideas to discover by @lihbr: https://lihbr.com/blog/one-link-component-to-rule-them-all
Beta Was this translation helpful? Give feedback.
All reactions