Nuxt•4w ago

Improval of Scrol-Saver

Hello, I got this code:

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();
    
    router.beforeEach((to, from) => {
        if (!import.meta.client) return;

        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");

        const getParentLink = (input: string) => {
            let fullPath = input.replace(/^\//, "").split("/");
            while (fullPath.length > 0 && /^\d+$/.test(fullPath[fullPath.length - 1])) {
                fullPath.pop();
            }
            return "/" + fullPath.join("/") || "/";
        };

        if (getParentLink(from.fullPath) !== getParentLink(to.fullPath)) {
            sessionStorage.removeItem("sidebarScroll");
        } else {
            if (sidebarRef) {
                sessionStorage.setItem("sidebarScroll", sidebarRef.scrollTop.toString());
            }
        }
    });

    nuxtApp.hook("page:loading:end", () => {
        if (!import.meta.client) return;

        const savedPosition = sessionStorage.getItem("sidebarScroll");
        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
        if (savedPosition && sidebarRef) {
            sidebarRef.scrollTop = parseInt(savedPosition, 10);
        }
    });
});

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();
    
    router.beforeEach((to, from) => {
        if (!import.meta.client) return;

        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");

        const getParentLink = (input: string) => {
            let fullPath = input.replace(/^\//, "").split("/");
            while (fullPath.length > 0 && /^\d+$/.test(fullPath[fullPath.length - 1])) {
                fullPath.pop();
            }
            return "/" + fullPath.join("/") || "/";
        };

        if (getParentLink(from.fullPath) !== getParentLink(to.fullPath)) {
            sessionStorage.removeItem("sidebarScroll");
        } else {
            if (sidebarRef) {
                sessionStorage.setItem("sidebarScroll", sidebarRef.scrollTop.toString());
            }
        }
    });

    nuxtApp.hook("page:loading:end", () => {
        if (!import.meta.client) return;

        const savedPosition = sessionStorage.getItem("sidebarScroll");
        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
        if (savedPosition && sidebarRef) {
            sidebarRef.scrollTop = parseInt(savedPosition, 10);
        }
    });
});

Any ideas how I can get it that it doesnt flicker when using this? I use a div and added there <div saveScroll>... I made this because somehow Nuxt sets the scrollTop everytime to 0...

21 Replies

kapa.ai•4w ago

Hi @MrFox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing flickering when using your scroll position saving code for a sidebar in Nuxt. This is a common issue when manipulating scroll positions during page navigation. The Issue The flickering occurs because there's a brief moment when the scroll position resets to 0 before your code restores the saved position. This happens because Nuxt's default router behavior resets scroll positions during navigation. Potential Solutions 1. Use setTimeout for Delayed Restoration One approach is to delay the scroll restoration slightly to ensure it happens after Nuxt's default scroll behavior:

nuxtApp.hook("page:loading:end", () => {
    if (!import.meta.client) return;

    setTimeout(() => {
        const savedPosition = sessionStorage.getItem("sidebarScroll");
        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
        if (savedPosition && sidebarRef) {
            sidebarRef.scrollTop = parseInt(savedPosition, 10);
        }
    }, 0);
});

nuxtApp.hook("page:loading:end", () => {
    if (!import.meta.client) return;

    setTimeout(() => {
        const savedPosition = sessionStorage.getItem("sidebarScroll");
        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
        if (savedPosition && sidebarRef) {
            sidebarRef.scrollTop = parseInt(savedPosition, 10);
        }
    }, 0);
});

This small timeout can help avoid the flickering by ensuring your code runs after Nuxt's internal scroll handling. 2. Consider Using useCookie Instead of sessionStorage Several Nuxt users have found that using useCookie instead of sessionStorage provides better state persistence:

const sidebarScroll = useCookie('sidebarScroll', {
    default: () => '0',
    watch: true
});

// Then use sidebarScroll.value instead of sessionStorage

const sidebarScroll = useCookie('sidebarScroll', {
    default: () => '0',
    watch: true
});

// Then use sidebarScroll.value instead of sessionStorage

This approach is recommended in Nuxt 3 for state persistence between reloads as mentioned in this Stack Overflow solution. 3. Handle sessionStorage Errors Your code might also benefit from error handling when accessing sessionStorage, as it can throw errors in certain situations:

try {
    sessionStorage.setItem("sidebarScroll", sidebarRef.scrollTop.toString());
} catch (error) {
    console.error("Could not save scroll position:", error);
}

try {
    sessionStorage.setItem("sidebarScroll", sidebarRef.scrollTop.toString());
} catch (error) {
    console.error("Could not save scroll position:", error);
}

This is a good practice as Nuxt has had issues with sessionStorage access in the past as noted in this PR. 4. Use runWithContext for Composables If you're using any Nuxt composables within your functions, make sure to use runWithContext to ensure proper context:

const nuxtApp = useNuxtApp();
nuxtApp.runWithContext(() => {
    // Your code using composables
});

const nuxtApp = useNuxtApp();
nuxtApp.runWithContext(() => {
    // Your code using composables
});

This helps with context restoration as documented in Nuxt. I hope these suggestions help reduce the flickering in your scroll position saving implementation! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

@kapa.ai If I understood right I can use then

 nuxtApp.runWithContext(() => {
        if (!import.meta.client) return;

        onMounted(() => {
            const savedPosition = sessionStorage.getItem("sidebarScroll");
            const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
            if (savedPosition && sidebarRef) {
                sidebarRef.scrollTop = parseInt(savedPosition, 10);
            }
        });
    });

 nuxtApp.runWithContext(() => {
        if (!import.meta.client) return;

        onMounted(() => {
            const savedPosition = sessionStorage.getItem("sidebarScroll");
            const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
            if (savedPosition && sidebarRef) {
                sidebarRef.scrollTop = parseInt(savedPosition, 10);
            }
        });
    });

But this errors:

router.ts:56 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue you're encountering with the onMounted hook inside runWithContext. This is happening because onMounted is a Vue lifecycle hook that needs to be called during component setup, but you're trying to use it in a plugin context. The error message is clear: "Lifecycle injection APIs can only be used during execution of setup()." Here's how you can fix this: Solution Instead of using onMounted in your plugin, you should use Nuxt app hooks which are designed for this purpose:

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();
    
    router.beforeEach((to, from) => {
        if (!import.meta.client) return;

        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");

        const getParentLink = (input: string) => {
            let fullPath = input.replace(/^\//, "").split("/");
            while (fullPath.length > 0 && /^\d+$/.test(fullPath[fullPath.length - 1])) {
                fullPath.pop();
            }
            return "/" + fullPath.join("/") || "/";
        };

        if (getParentLink(from.fullPath) !== getParentLink(to.fullPath)) {
            sessionStorage.removeItem("sidebarScroll");
        } else {
            if (sidebarRef) {
                sessionStorage.setItem("sidebarScroll", sidebarRef.scrollTop.toString());
            }
        }
    });

    // Use Nuxt app hooks instead of onMounted
    nuxtApp.hook('page:finish', () => {
        if (!import.meta.client) return;

        const savedPosition = sessionStorage.getItem("sidebarScroll");
        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
        if (savedPosition && sidebarRef) {
            sidebarRef.scrollTop = parseInt(savedPosition, 10);
        }
    });
});

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();
    
    router.beforeEach((to, from) => {
        if (!import.meta.client) return;

        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");

        const getParentLink = (input: string) => {
            let fullPath = input.replace(/^\//, "").split("/");
            while (fullPath.length > 0 && /^\d+$/.test(fullPath[fullPath.length - 1])) {
                fullPath.pop();
            }
            return "/" + fullPath.join("/") || "/";
        };

        if (getParentLink(from.fullPath) !== getParentLink(to.fullPath)) {
            sessionStorage.removeItem("sidebarScroll");
        } else {
            if (sidebarRef) {
                sessionStorage.setItem("sidebarScroll", sidebarRef.scrollTop.toString());
            }
        }
    });

    // Use Nuxt app hooks instead of onMounted
    nuxtApp.hook('page:finish', () => {
        if (!import.meta.client) return;

        const savedPosition = sessionStorage.getItem("sidebarScroll");
        const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
        if (savedPosition && sidebarRef) {
            sidebarRef.scrollTop = parseInt(savedPosition, 10);
        }
    });
});

The page:finish hook is called when the page is fully loaded and mounted, which is similar to what you were trying to achieve with onMounted. This is the appropriate hook to use in this context as mentioned in this Stack Overflow post. If you're still experiencing flickering, you might also want to try:

// After page transition finishes
nuxtApp.hook('page:transition:finish', () => {
    if (!import.meta.client) return;

    const savedPosition = sessionStorage.getItem("sidebarScroll");
    const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
    if (savedPosition && sidebarRef) {
        sidebarRef.scrollTop = parseInt(savedPosition, 10);
    }
});

// After page transition finishes
nuxtApp.hook('page:transition:finish', () => {
    if (!import.meta.client) return;

    const savedPosition = sessionStorage.getItem("sidebarScroll");
    const sidebarRef = document.querySelector<HTMLDivElement>("[saveScroll]");
    if (savedPosition && sidebarRef) {
        sidebarRef.scrollTop = parseInt(savedPosition, 10);
    }
});

Remember that runWithContext is primarily used to restore the Nuxt context in complex async scenarios, particularly in middleware and plugins where the context might be lost after async operations. In your case, using the appropriate Nuxt hook should be sufficient without needing runWithContext. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

@kapa.ai Whats the difference between vpage:loading:end and page:finish`?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I can explain the difference between page:loading:end and page:finish hooks in Nuxt: Difference between page:loading:end and page:finish page:finish - Called when the Suspense resolved event occurs - Triggered when the page component has finished loading and rendering - Occurs when the setup of the new page component is complete - Documentation reference page:loading:end - Called after page:finish - Specifically designed to signal that the loading state should end - Used by the loading indicator system to know when to hide the loading UI - Documentation reference The sequence of events during navigation is typically: 1. page:loading:start - When the setup() of the new page starts running 2. page:start - When Suspense enters pending state 3. page:finish - When Suspense resolves (page component is ready) 4. page:loading:end - After page:finish, signaling loading is complete There have been some issues with these hooks in the past: - The page:loading:end hook was sometimes called twice during navigation (GitHub issue #26535) - In some cases with nested pages, the loading indicator could get stuck because page:loading:end wasn't triggered properly (GitHub PR #31201) For your scroll-saving functionality, either hook could work, but page:finish might be more reliable as it's directly tied to when the page component is fully loaded, while page:loading:end is more specifically for controlling loading indicators. If you're experiencing flickering, you might want to try page:transition:finish instead, which fires after the page transition's onAfterLeave event, ensuring all animations are complete. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

@kapa.ai which methods are therer to create a store using pinia?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Creating Stores with Pinia in Nuxt Based on the knowledge sources, there are two main methods to create a store using Pinia in Nuxt: 1. Setup Store (Composition API) This is the modern, recommended approach using the Composition API with the defineStore function:

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref({ name: 'John Doe' })
  
  // Getters (computed properties)
  const userName = computed(() => user.value.name)
  
  // Actions (methods)
  function updateName(newName) {
    user.value.name = newName
  }

  return {
    user,
    userName,
    updateName
  }
})

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref({ name: 'John Doe' })
  
  // Getters (computed properties)
  const userName = computed(() => user.value.name)
  
  // Actions (methods)
  function updateName(newName) {
    user.value.name = newName
  }

  return {
    user,
    userName,
    updateName
  }
})

This approach is shown in the Nuxt state management documentation. 2. Options Store (Similar to Vuex style) This approach uses an options object similar to Vuex:

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  // State
  state: () => ({
    counter: 0,
  }),
  
  // Getters
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  
  // Actions
  actions: {
    increment() {
      this.counter++
    },
  },
})

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  // State
  state: () => ({
    counter: 0,
  }),
  
  // Getters
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  
  // Actions
  actions: {
    increment() {
      this.counter++
    },
  },
})

This style is demonstrated in the Nuxt migration documentation. Using Stores in Components After creating a store, you can use it in your components:

<script setup>
import { useUserStore } from '~/stores/user'

// Access the store
const userStore = useUserStore()

// Optional: extract state with storeToRefs for reactivity
import { storeToRefs } from 'pinia'
const { user } = storeToRefs(userStore)
</script>
<template>
  <div>
    <h1>{{ userStore.userName }}</h1>
    <button @click="userStore.updateName('Jane Doe')">Update Name</button>
  </div>
</template>

<script setup>
import { useUserStore } from '~/stores/user'

// Access the store
const userStore = useUserStore()

// Optional: extract state with storeToRefs for reactivity
import { storeToRefs } from 'pinia'
const { user } = storeToRefs(userStore)
</script>
<template>
  <div>
    <h1>{{ userStore.userName }}</h1>
    <button @click="userStore.updateName('Jane Doe')">Update Name</button>
  </div>
</template>

Composing Stores You can also compose stores by creating a composable and using it in multiple stores:

// Create a base composable
const useBaseStore = () => {
  const name = ref('')
  const age = ref(1)
  const ageString = computed(() => `${name.value} is aged ${age.value}`)

  function doubleAge() {
    age.value *= 2
  }

  return { name, age, ageString, doubleAge }
}

// Use it in different stores
export const usePersonStore = defineStore('person-store', () => {
  const base = useBaseStore()
  
  function tripleAge() {
    base.age.value *= 3
  }
  
  return { ...base, tripleAge }
})

// Create a base composable
const useBaseStore = () => {
  const name = ref('')
  const age = ref(1)
  const ageString = computed(() => `${name.value} is aged ${age.value}`)

  function doubleAge() {
    age.value *= 2
  }

  return { name, age, ageString, doubleAge }
}

// Use it in different stores
export const usePersonStore = defineStore('person-store', () => {
  const base = useBaseStore()
  
  function tripleAge() {
    base.age.value *= 3
  }
  
  return { ...base, tripleAge }
})

This pattern is shown in a Stack Overflow answer. To use Pinia in Nuxt, make sure to install the @pinia/nuxt module and add it to your nuxt.config.ts modules array. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

@kapa.ai Is this here:

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref({ name: 'John Doe' })
  
  // Getters (computed properties)
  const userName = computed(() => user.value.name)
  
  // Actions (methods)
  function updateName(newName) {
    user.value.name = newName
  }

  return {
    user,
    userName,
    updateName
  }
})

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref({ name: 'John Doe' })
  
  // Getters (computed properties)
  const userName = computed(() => user.value.name)
  
  // Actions (methods)
  function updateName(newName) {
    user.value.name = newName
  }

  return {
    user,
    userName,
    updateName
  }
})

Also possible without returning the values?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I need to clarify an important point about Pinia stores in Nuxt. No, it's not possible to create a Pinia store without returning the values. The return statement is essential in the setup-style Pinia store because: 1. The return statement defines what will be exposed from your store and available to components that use it. 2. Without returning values, components would have no way to access the state, getters, or actions defined in your store. This is similar to how Vue's Composition API works in general - you need to return what you want to make available outside the setup function. Here's what would happen if you didn't return the values:

// This would NOT work as expected
export const useUserStore = defineStore('user', () => {
  const user = ref({ name: 'John Doe' })
  const userName = computed(() => user.value.name)
  
  function updateName(newName) {
    user.value.name = newName
  }
  
  // No return statement or empty return
})

// This would NOT work as expected
export const useUserStore = defineStore('user', () => {
  const user = ref({ name: 'John Doe' })
  const userName = computed(() => user.value.name)
  
  function updateName(newName) {
    user.value.name = newName
  }
  
  // No return statement or empty return
})

In this case, components using useUserStore() would get an empty object or undefined, making the store essentially useless. The return statement is what makes the reactive state and functions accessible to the rest of your application, which is the whole purpose of using a store in the first place. If you're looking for a way to share state without explicitly returning values, you might want to look at Nuxt's useState composable instead, but even there you'd need to return the state from your composable if you wrap it. Would you like to know more about alternative state management approaches in Nuxt? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

@kapa.ai Can I add parameters to the init of useUserStore? Like useUserStore(token:string)

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I can explain how to pass parameters to Pinia stores in Nuxt. When using Pinia in Nuxt, you can't directly pass parameters to the store initialization function like useUserStore(token: string). However, there are a couple of approaches you can use to achieve similar functionality: 1. Using the Pinia instance parameter The defineStore setup function actually receives the Pinia instance as a parameter, which you can use when initializing your store:

export const useUserStore = defineStore('user', ($pinia) => {
  // State
  const user = ref({ name: 'John Doe' })
  
  // You can use $pinia here if needed
  
  return {
    user,
    // other properties and methods
  }
})

export const useUserStore = defineStore('user', ($pinia) => {
  // State
  const user = ref({ name: 'John Doe' })
  
  // You can use $pinia here if needed
  
  return {
    user,
    // other properties and methods
  }
})

2. Creating actions to initialize the store A more common approach is to create an initialization action in your store:

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref({ name: '' })
  const token = ref('')
  
  // Action to initialize the store with parameters
  function initialize(userToken: string) {
    token.value = userToken
    // Do other initialization with the token
  }
  
  return {
    user,
    token,
    initialize
  }
})

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref({ name: '' })
  const token = ref('')
  
  // Action to initialize the store with parameters
  function initialize(userToken: string) {
    token.value = userToken
    // Do other initialization with the token
  }
  
  return {
    user,
    token,
    initialize
  }
})

Then in your component:

const userStore = useUserStore()
userStore.initialize('your-token-here')

const userStore = useUserStore()
userStore.initialize('your-token-here')

3. Using a plugin for global initialization For values that should be available throughout your app, you can use a Nuxt plugin:

// plugins/pinia.ts
export default defineNuxtPlugin(({ $pinia }) => {
  const userStore = useUserStore($pinia)
  
  // Initialize with values from runtime config or elsewhere
  const config = useRuntimeConfig()
  userStore.initialize(config.authToken)
  
  return {
    provide: {
      store: userStore
    }
  }
})

// plugins/pinia.ts
export default defineNuxtPlugin(({ $pinia }) => {
  const userStore = useUserStore($pinia)
  
  // Initialize with values from runtime config or elsewhere
  const config = useRuntimeConfig()
  userStore.initialize(config.authToken)
  
  return {
    provide: {
      store: userStore
    }
  }
})

This approach is shown in the Nuxt migration documentation. Would you like me to explain any of these approaches in more detail? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

@kapa.ai without an extra function directly by useUserStore(config.token)

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I don't see a direct way to pass parameters to a Pinia store like useUserStore(config.token) in Nuxt without using an initialization function. The standard Pinia store pattern in Nuxt doesn't support passing custom parameters directly to the store when calling it. The only parameter that can be passed to useUserStore() is the Pinia instance itself, which is typically handled automatically by the @pinia/nuxt module. From the knowledge sources, I can see that when using Pinia outside of components (like in middleware or plugins), you might need to use useNuxtApp().runWithContext() to ensure the Pinia context is available:

// This is for accessing a store outside of components
return useNuxtApp().runWithContext(() => useStore())

// This is for accessing a store outside of components
return useNuxtApp().runWithContext(() => useStore())

This is mentioned in this GitHub issue as a solution for the "no active Pinia" error. However, this still doesn't allow passing custom parameters to the store initialization. The most idiomatic approach in Pinia/Nuxt remains creating an initialization action in your store that you call after creating the store instance, as I mentioned in my previous response. Would you like me to suggest alternative patterns for managing configuration values that might better suit your use case? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@702574561857896569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MrFoxOP•4w ago

Gaming

Programming

Improval of Scrol-Saver

Did you find this page helpful?