Menu
I can't seem to find a good way to disable a nuxt-link based on a data variable. Could anyone suggest something? I've tried looking at doucmentation but I can't come up with anything.
Say I have a boolean called disable I want to do something like this
<nuxt-link :disabled="disable"></nuxt-link>
I basically just don't want the link to be clickable if the boolean is set to false
948
Is to change the tag to the button and use the native :disabled state. Then just turn the button into the link with the help of styles.
In order to style your active links the only thing you have to do to is add the nuxt-link-active class to your styles and then you can style it as you wish. Sometimes this will also add styles to other links such as the parent routes or the home page.
You can protect routes and make them accessible only for authenticated users for example. Create middleware directory in Nuxt root folder, and create a new file called auth. js therein. Now, Nuxt will redirect user to /login page if not already authenticated (i.e., isLoggedIn is false ).
I found that the most simple way was to just create a class for the disabled links. I'm still not sure if this is the best way to do it but it works for me and does exactly what I want.
<nuxt-link to="/search" :class="{ disabled: disabled }"> Search </nuxt-link>
my css
.disabled {
color: lightgrey
pointer-events: none
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With