Solve Hydration node mismatch for useStorage

[iBobik]

Clear and concise description of the problem

When using useStorage for app state like this:

export const useOrder = () => useLocalStorage<Order>('order', { items: [] })

The SSR will render UI with default value and client will render UI with saved state which will render to Hydration node mismatch warning.

Suggested solution

It would be nice if I can solve it like this:

export const useOrder = () => useLocalStorage<Order>('order', { items: [] }, { ssrUseDefault: true })

Which will set default value first and wait for page:finish hook.

Alternative

Workaround:

export function useOrder () {
  const order = ref(defaultOrder)
  useNuxtApp().hook('page:finish', () => {
    const storedOrder = useLocalStorage<Order>('order', defaultOrder)
    order.value = storedOrder.value
  })
  return order
}

Additional context

Maybe print warning when ssrUseDefault option was used in non-Nuxt environment.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[posva]

A possible implementation would be to setup the listeners within onMounted() so they are only applied once the app has rendered. I opened #3504