@nuxt/docs-nightly 5.0.0-29548883.c6ed8076 → 5.0.0-29550727.fea006dd

package/1.getting-started/17.testing.md

@@ -362,12 +362,12 @@ The options object accepts `@testing-library/vue` render options and the followi
 
 #### `mockNuxtImport`
 
-`mockNuxtImport` allows you to mock Nuxt's auto import functionality. For example, to mock `useStorage`, you can do so like this:
+`mockNuxtImport` allows you to mock Nuxt's auto import functionality. For example, to mock `useState`, you can do so like this:
 
 ```ts twoslash
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
-mockNuxtImport('useStorage', () => {
+mockNuxtImport('useState', () => {
   return () => {
     return { value: 'mocked storage' }
   }
@@ -378,19 +378,19 @@ mockNuxtImport('useStorage', () => {
 
 You can explicitly type the mock for type safety, and use the original implementation passed to the factory function when mocking complex functionality.
 
-```ts twoslash
+```ts twoslash [test/nuxt/import.test.ts]
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
-mockNuxtImport<typeof useStorage>('useStorage', (original) => {
+mockNuxtImport<typeof useState>('useState', (original) => {
   return (...args) => {
-    return { ...original(...args), value: 'mocked storage' }
+    return { ...original('some-key'), value: 'mocked state' }
   }
 })
 
 // or specify the target to mock
-mockNuxtImport(useStorage, (original) => {
+mockNuxtImport(useState, (original) => {
   return (...args) => {
-    return { ...original(...args), value: 'mocked storage' }
+    return { ...original('some-key'), value: 'mocked state' }
   }
 })
 
@@ -407,20 +407,20 @@ If you need to mock a Nuxt import and provide different implementations between
 import { vi } from 'vitest'
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
-const { useStorageMock } = vi.hoisted(() => {
+const { useStateMock } = vi.hoisted(() => {
   return {
-    useStorageMock: vi.fn(() => {
+    useStateMock: vi.fn(() => {
       return { value: 'mocked storage' }
     }),
   }
 })
 
-mockNuxtImport('useStorage', () => {
-  return useStorageMock
+mockNuxtImport('useState', () => {
+  return useStateMock
 })
 
 // Then, inside a test
-useStorageMock.mockImplementation(() => {
+useStateMock.mockImplementation(() => {
   return { value: 'something else' }
 })
 ```
@@ -544,7 +544,7 @@ If you would like to use both the end-to-end and unit testing functionality of `
 ```ts twoslash
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 
-mockNuxtImport('useStorage', () => {
+mockNuxtImport('useState', () => {
   return () => {
     return { value: 'mocked storage' }
   }

package/2.directory-structure/1.app/1.layouts.md

@@ -122,7 +122,7 @@ File | Layout Name
 
 You can also use the [`setPageLayout`](/docs/4.x/api/utils/set-page-layout) helper to change the layout dynamically:
 
-```vue twoslash
+```vue twoslash [app/pages/index.vue]
 <script setup lang="ts">
 declare module 'nuxt/app' {
   interface NuxtLayouts {

package/3.guide/2.best-practices/hydration.md

@@ -6,32 +6,32 @@ description: Why fixing hydration issues is important
 
 When developing, you may face hydration issues. Don't ignore those warnings.
 
-# Why is it important to fix them?
+## Why is it important to fix them?
 
 Hydration mismatches are not just warnings - they are indicators of serious problems that can break your application:
 
-## Performance Impact
+### Performance Impact
 
 - **Increased time to interactive**: Hydration errors force Vue to re-render the entire component tree, which will increase the time for your Nuxt app to become interactive
 - **Poor user experience**: Users may see content flashing or unexpected layout shifts
 
-## Functionality Issues
+### Functionality Issues
 
 - **Broken interactivity**: Event listeners may not attach properly, leaving buttons and forms non-functional
 - **State inconsistencies**: Application state can become out of sync between what the user sees and what the application thinks is rendered
 - **SEO problems**: Search engines may index different content than what users actually see
 
-# How to detect them
+## How to detect them
 
-## Development Console Warnings
+### Development Console Warnings
 
 Vue will log hydration mismatch warnings in the browser console during development:
 
 ![Screenshot of Vue hydration mismatch warning in the browser console](/assets/docs/best-practices/vue-console-hydration.png)
 
-# Common reasons
+## Common reasons
 
-## Browser-only APIs in Server Context
+### Browser-only APIs in Server Context
 
 **Problem**: Using browser-specific APIs during server-side rendering.
 
@@ -60,7 +60,7 @@ const userTheme = useCookie('theme', { default: () => 'light' })
 </script>
 ```
 
-## Inconsistent Data
+### Inconsistent Data
 
 **Problem**: Different data between server and client.
 
@@ -82,7 +82,7 @@ const state = useState('random', () => Math.random())
 </script>
 ```
 
-## Conditional Rendering Based on Client State
+### Conditional Rendering Based on Client State
 
 **Problem**: Using client-only conditions during SSR.
 
@@ -105,7 +105,7 @@ const state = useState('random', () => Math.random())
 </template>
 ```
 
-## Third-party Libraries with Side Effects
+### Third-party Libraries with Side Effects
 
 **Problem**: Libraries that modify the DOM or have browser dependencies (this happens a LOT with tag managers).
 
@@ -129,7 +129,7 @@ onMounted(async () => {
 </script>
 ```
 
-## Dynamic Content Based on Time
+### Dynamic Content Based on Time
 
 **Problem**: Content that changes based on current time.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "5.0.0-29548883.c6ed8076",
+  "version": "5.0.0-29550727.fea006dd",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",