DEV Community

Discussion on: Why Haven't u Migrated to Nuxt 3 Yet? 🥵 7 Benefits to Consider

Collapse
 
userof profile image
Matthias Wiebe

From your other page create a link like that.

<NuxtLink to="/example#section-1">Go to Section 1</NuxtLink>
Enter fullscreen mode Exit fullscreen mode

In your corresponding specific section it looks like this:

<template>
  <div>
    <h1>Welcome to the Example Page</h1>
    <section id="section-1">
      <!-- Your content for section 1 here -->
    </section>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Its very simple. Just make sure you have properly set up the routing in your Nuxt application. Hope that helped you ;)

Collapse
 
viswasakthi3 profile image
Viswasakthi P • Edited

well the components that are shown and hidden are based on the active index the values needed to be changed to show the components since the section is changed by selection we also cant use scrollable too

i tried the pinia store to store the value and then access but when refereshed the value changes if its not be changed when navigating to another page thta would work any other way using nuxt 3 any idea ??

Thread Thread
 
l422y profile image
L422Y

You can use anything with nuxt, you probably need to add a plugin for scrollable

Pinia does not persist across refresh by default as you are clearing the app state, you need to persist the state using a storage mechanism.

vuemastery.com/blog/refresh-proof-...