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.
-
|
This is a well thought RFC @lihbr I LOVE IT!💯 Some suggestions:
|
Beta Was this translation helpful? Give feedback.
-
|
I think Vue Router's Serializing Nuxt config Definitely! I'm still thinking Nuxt 2 for those patterns and if Nuxt config is not the go-to pattern anymore we can move to the new go-to pattern
I think the default from Vue Router is prefixed with |
Beta Was this translation helpful? Give feedback.
-
Yes (in cases that
Makes sense making backward compatible to Nuxt2 👍 |
Beta Was this translation helpful? Give feedback.
-
|
I still don't get the |
Beta Was this translation helpful? Give feedback.
-
|
The NuxtLink should be extendable like RouterLink |
Beta Was this translation helpful? Give feedback.
-
|
Yes this is exactly what i came across today. Using the isActive from v-slot to switch tailwincss classess. It "works" but currently results in <template>
<router-link
v-for="item in sidebarNavigation"
:key="item.name"
v-slot="{ isActive, href, navigate }"
:to="item.route"
>
<a
@click="navigate"
:aria-current="isActive ? 'page' : undefined"
:class="[
isActive
? 'activeclassnames more-activeclassnames'
: 'alistof non-active classnames',
'default-classnames here',
]"
>
</span>
</router-link>
</template> |
Beta Was this translation helpful? Give feedback.
-
|
You can use the We'll definitely consider something like that for the new |
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.
-
|
Hey! I've been super busy since then with lot of things (dev & life) This might get implemented really soon by either me or the Nuxt team for March RC release plan. Final interface might change a bit as we discover restrictions/learn through the implementing step but should follow along the above lines. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much & keep up the great work bro |
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.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Updated the post to reflect all the discussion that happened:
|
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.
-
|
@danielroe I understand, this might be vue-router. I've got so comfortable and to lazy with Nuxt<3 that setting up nested pages with vue3 would make my head go spin. The original issue here was something like "this worked in nuxt2, should this not also work in nuxt3(not now? maybe later?)" Having the following structure in nuxt 2 works and gives blog/index an active class when on the blog/slug Doing the same in nuxt 3 will not consider blog/index as parent ( and this seems logical for now, because they are not nested as parent/child ) Changing to structure to and adding only edit:removed part3 |
Beta Was this translation helpful? Give feedback.
-
|
@vanling are you sure for your "update"/third way ? This simply means moving Because on my side, both parent and children display the blog index page. |
Beta Was this translation helpful? Give feedback.
-
|
@duboiss you are right, I only looked at the active states.. in my example content does not show up :( sorry! |
Beta Was this translation helpful? Give feedback.
-
|
@vanling no probs. I still haven't tried it with , I'll do it in the week |
Beta Was this translation helpful? Give feedback.
-
|
Ok on my side for the initial solution ( |
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.
-
|
It's also worth noting you can also omit the |
Beta Was this translation helpful? Give feedback.
-
|
@duboiss I'm not able to reproduce that workaround with the setup you mentioned to get the active class on the |
Beta Was this translation helpful? Give feedback.
-
|
@lihbr Hmmm how is your
I have Edit : I forgot. Create also a <template>
<div>
<nuxt-page />
</div>
</template> |
Beta Was this translation helpful? Give feedback.
-
|
Oh yes, with the additional |
Beta Was this translation helpful? Give feedback.
-
|
@duboiss thanks for sharing you approach. Personally I prefer the |
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
NuxtLinkthat 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:RouterLinkwhenpages/directory enabledRouterLinkSome 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