@nuxt/docs-nightly 4.0.2-29219763.831e65b8 → 4.0.2-29223962.d8d2f3e1

package/1.getting-started/02.installation.md

@@ -39,19 +39,19 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
 ::code-group{sync="pm"}
 
 ```bash [npm]
-npm create nuxt <project-name>
+npm create nuxt@latest <project-name>
 ```
 
 ```bash [yarn]
-yarn create nuxt <project-name>
+yarn create nuxt@latest <project-name>
 ```
 
 ```bash [pnpm]
-pnpm create nuxt <project-name>
+pnpm create nuxt@latest <project-name>
 ```
 
 ```bash [bun]
-bun create nuxt <project-name>
+bun create nuxt@latest <project-name>
 ```
 
 ```bash [deno]

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

@@ -0,0 +1,188 @@
+---
+navigation.title: 'Nuxt and hydration'
+title: Nuxt and hydration
+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?
+
+Hydration mismatches are not just warnings - they are indicators of serious problems that can break your application:
+
+## 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
+
+- **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
+
+## 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
+
+## Browser-only APIs in Server Context
+
+**Problem**: Using browser-specific APIs during server-side rendering.
+
+```html
+<template>
+  <div>User preference: {{ userTheme }}</div>
+</template>
+
+<script setup>
+// This will cause hydration mismatch!
+// localStorage doesn't exist on the server!
+const userTheme = localStorage.getItem('theme') || 'light'
+</script>
+```
+
+**Solution**: You can use [`useCookie`](/docs/api/composables/use-cookie):
+
+```html
+<template>
+  <div>User preference: {{ userTheme }}</div>
+</template>
+
+<script setup>
+// This works on both server and client
+const userTheme = useCookie('theme', { default: () => 'light' })
+</script>
+```
+
+## Inconsistent Data
+
+**Problem**: Different data between server and client.
+
+```html
+<template>
+  <div>{{ Math.random() }}</div>
+</template>
+```
+
+**Solution**: Use SSR-friendly state:
+
+```html
+<template>
+  <div>{{ state }}</div>
+</template>
+
+<script setup>
+const state = useState('random', () => Math.random())
+</script>
+```
+
+## Conditional Rendering Based on Client State
+
+**Problem**: Using client-only conditions during SSR.
+
+```html
+<template>
+  <div v-if="window?.innerWidth > 768">
+    Desktop content
+  </div>
+</template>
+```
+
+**Solution**: Use media queries or handle it client-side:
+
+```html
+<template>
+  <div class="responsive-content">
+    <div class="hidden md:block">Desktop content</div>
+    <div class="md:hidden">Mobile content</div>
+  </div>
+</template>
+```
+
+## Third-party Libraries with Side Effects
+
+**Problem**: Libraries that modify the DOM or have browser dependencies (this happens a LOT with tag managers).
+
+```html
+<script setup>
+if (import.meta.client) {
+    const { default: SomeBrowserLibrary } = await import('browser-only-lib')
+    SomeBrowserLibrary.init()
+}
+</script>
+```
+
+**Solution**: Initialise libraries after hydration has completed:
+
+```html
+<script setup>
+onMounted(async () => {
+  const { default: SomeBrowserLibrary } = await import('browser-only-lib')
+  SomeBrowserLibrary.init()
+})
+</script>
+```
+
+## Dynamic Content Based on Time
+
+**Problem**: Content that changes based on current time.
+
+```html
+<template>
+  <div>{{ greeting }}</div>
+</template>
+
+<script setup>
+const hour = new Date().getHours()
+const greeting = hour < 12 ? 'Good morning' : 'Good afternoon'
+</script>
+```
+
+**Solution**: Use [`NuxtTime`](/docs/api/components/nuxt-time) component or handle it client-side:
+
+```html
+<template>
+  <div>
+    <NuxtTime :date="new Date()" format="HH:mm" />
+  </div>
+</template>
+```
+
+```html
+<template>
+  <div>
+    <ClientOnly>
+      {{ greeting }}
+      <template #fallback>
+        Hello!
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+const greeting = ref('Hello!')
+
+onMounted(() => {
+  const hour = new Date().getHours()
+  greeting.value = hour < 12 ? 'Good morning' : 'Good afternoon'
+})
+</script>
+```
+
+## In summary
+
+1. **Use SSR-friendly composables**: [`useFetch`](/docs/api/composables/use-fetch), [`useAsyncData`](/docs/api/composables/use-async-data), [`useState`](/docs/api/composables/use-state)
+2. **Wrap client-only code**: Use [`ClientOnly`](/docs/api/components/client-only) component for browser-specific content
+3. **Consistent data sources**: Ensure server and client uses the same data
+4. **Avoid side effects in setup**: Move browser-dependent code to `onMounted`
+
+::tip
+You can read the [Vue documentation on SSR hydration mismatch](https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) for a better understanding of hydration.
+::

package/5.community/4.contribution.md

@@ -80,6 +80,24 @@ If we mark a PR as 'pending', that means we likely have another task to do in re
 
 We'll do our best to follow [our PR decision making flowchart](https://mermaid.live/view#pako:eNp9VE1v2kAQ_SsjXzBSEqlALlaUisSh0ACK2l4qcVm8Y9hi7672Iwly-O-ZtYPt5FAOCHbee_PmzdpVlCmOURLlhXrJ9sw4-JNuJNBnWs1UQafIQVjrERyWumAOv58-AJeXt29_0b7BXbWwwL0uRPa1vlZvcB_fF8oiMMmB2QM4BXkt3UoON7Lh3LWaDz2SVkK6QGt7DHvw0CKt5sxCKaQoWQEGtVHcZ04oGdw04LTVngW_LHOeFcURGGz97mw6PSv-iJdsi0UCA4nI7SfNwc3W3JZit3eQ1SZFDlKB15yswQ2MgbOjbYeatY3n8bcr-IWlekYYaJRcyB04I9gOB1CEfkF5dAVTzmFAtnqn4-bUYAiMMmHZgWhNPRhgus5mW2BATxq0NkIZ4Y4NbNjzE2ZchBzcHmGLe_ZMSKCcyRXyLrVFa_5n_PBK2xKy3kk9eOjULUdltk6C8kI-7NFDr8f4EVGDoqlp-wa4sJm3ltIMIuZ_mTQXJyTSkQZtunPqsKxShV9GKdkBYe1fHXjpbcjlvONlO9Kqx_M7YHmOmav_luxfE5zKwVs09hM5DLSupgYDlr5flDkwo7ykixKG-xDsUly1LZ-uY32dgDc7lG7YqwbNp0msJwmIUivjWFtfd-xRrEcJ7Omydz37qFplHOtxEp4GskI2qB5dRCWakglOz3oV8JuITJa4iRL6yZk5bKKNPBGOead-H2UWJc54vIiaW53SPgwrz4fIhVNm1bw76lfI6R2_MW21) when responding and reviewing to pull requests.
 
+### AI-Assisted Contributions
+
+We welcome the thoughtful use of AI tools when contributing to Nuxt, yet ask all contributors to follow [two core principles](https://roe.dev/blog/using-ai-in-open-source).
+
+#### Never let an LLM speak for you
+
+* All comments, issues, and pull request descriptions should be written in your own voice
+* We value clear, human communication over perfect grammar or spelling
+* Avoid copy-pasting AI-generated summaries that don't reflect your own understanding
+
+#### Never let an LLM think for you
+
+* Feel free to use AI tools to generate code or explore ideas
+* Only submit contributions you fully understand and can explain
+* Contributions should reflect your own reasoning and problem-solving
+
+Our aim is ensuring quality and maintaining the joy of collaborating and communicating with real people. If you have ideas for improving our policy on AI in the Nuxt community, we'd love to hear them! ❤️
+
 ### Create a Module
 
 If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.0.2-29219763.831e65b8",
+  "version": "4.0.2-29223962.d8d2f3e1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",