docs: add video links for more context (#27174)

docs/1.getting-started/11.testing.md

@@ -10,6 +10,10 @@ If you are a module author, you can find more specific information in the [Modul
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"}
+Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`.
+::
+
 ## Installation
 
 In order to allow you to manage your other testing dependencies, `@nuxt/test-utils` ships with various optional peer dependencies. For example:

docs/1.getting-started/12.upgrade.md

@@ -25,6 +25,10 @@ Nuxt 4 is planned to be released **on or before June 14** (though obviously this
 
 Until then, it is possible to test many of Nuxt 4's breaking changes on the nightly release channel.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"}
+Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking changes already.
+::
+
 ### Opting in to Nuxt 4
 
 First, opt in to the nightly release channel [following these steps](/docs/guide/going-further/nightly-release-channel#opting-in).

docs/1.getting-started/3.configuration.md

@@ -46,6 +46,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
+Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
+::
+
 ::note
 If you're authoring layers, you can also use the `$meta` key to provide metadata that you or the consumers of your layer might use.
 ::

docs/1.getting-started/6.data-fetching.md

@@ -54,6 +54,10 @@ const { data: count } = await useFetch('/api/count')
 
 This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
 :read-more{to="/docs/api/composables/use-fetch"}
 
 :link-example{to="/docs/examples/features/data-fetching"}
@@ -93,6 +97,10 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
 It's developer experience sugar for the most common use case.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
+Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`.
+::
+
 There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
 
 ```vue [pages/users.vue]

docs/1.getting-started/7.state-management.md

@@ -8,6 +8,10 @@ Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to cr
 
 [`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+Watch a video from Alexander Lichter about why and when to use `useState()`.
+::
+
 ::important
 Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
 ::
@@ -208,6 +212,10 @@ const color = useColor() // Same as useState('color')
 </template>
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
+Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt.
+::
+
 ## Using third-party libraries
 
 Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex).

docs/1.getting-started/8.server.md

@@ -20,6 +20,10 @@ Using Nitro gives Nuxt superpowers:
 
 Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
+Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application.
+::
+
 ## Server Endpoints & Middleware
 
 You can easily manage the server-only part of your Nuxt app, from API endpoints to middleware.

docs/1.getting-started/9.layers.md

@@ -51,7 +51,7 @@ Read more about layers in the **Layer Author Guide**.
 Watch a video from Learn Vue about Nuxt Layers.
 ::
 
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA&t=271s" target="_blank"}
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
 Watch a video from Alexander Lichter about Nuxt Layers.
 ::
 

docs/2.guide/1.concepts/1.auto-imports.md

@@ -60,6 +60,10 @@ That means that (with very few exceptions) you cannot use them outside a Nuxt pl
 
 If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=ofuKRZLtOdY" target="_blank"}
+Watch a video from Alexander Lichter about handling async code in composables and fixing `Nuxt instance is unavailable` in your app.
+::
+
 ::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star-duotone"}
 Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions.
 ::
@@ -168,3 +172,7 @@ export default defineNuxtConfig({
   }
 })
 ```
+
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=FT2LQJ2NvVI" target="_blank"}
+Watch a video from Alexander Lichter on how to easily set up custom auto imports.
+::

docs/2.guide/1.concepts/8.typescript.md

@@ -65,6 +65,10 @@ This file contains the recommended basic TypeScript configuration for your proje
 
 [Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
 
+::tip{icon="i-ph-video-duotone" to="https://youtu.be/umLI7SlPygY" target="_blank"}
+Watch a video from Daniel Roe explaining built-in Nuxt aliases.
+::
+
 ::note
 Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
 ::

docs/2.guide/2.directory-structure/1.plugins.md

@@ -76,6 +76,10 @@ export default defineNuxtPlugin({
 })
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
+Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins.
+::
+
 ::note
 If you are using the object-syntax, the properties may be statically analyzed in future to produce a more optimized build. So you should not define them at runtime. :br
 For example, setting `enforce: import.meta.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins.

docs/2.guide/3.going-further/1.experimental-features.md

@@ -306,6 +306,10 @@ Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/n
 
 You can even get typed params within a page by using `const route = useRoute('route-name')`.
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
+Watch a video from Daniel Roe explaining type-safe routing in Nuxt.
+::
+
 ## watcher
 
 Set an alternative watcher that will be used as the watching service for Nuxt.
@@ -340,6 +344,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
+Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting.
+::
+
 It is particularly important when enabling this feature to make sure that any unique key of your data
 is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch
 data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch`

docs/2.guide/3.going-further/10.runtime-config.md

@@ -61,6 +61,10 @@ Setting the default of `runtimeConfig` values to *differently named environment
 It is advised to use environment variables that match the structure of your `runtimeConfig` object.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://youtu.be/_FYV5WfiWvs" target="_blank"}
+Watch a video from Alexander Lichter showcasing the top mistake developers make using runtimeConfig.
+::
+
 #### Example
 
 ```sh [.env]

docs/3.api/2.composables/use-fetch.md

@@ -66,6 +66,10 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
 `useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
 :link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
 
 :read-more{to="/docs/getting-started/data-fetching"}

docs/3.api/2.composables/use-nuxt-app.md

@@ -138,6 +138,10 @@ Nuxt exposes the following properties through `ssrContext`:
 
   Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt.
 
+  ::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"}
+  Watch a video from Alexander Lichter about serializing payloads, especially with regards to classes.
+  ::
+
   In the example below, we define a reducer (or a serializer) and a reviver (or deserializer) for the [Luxon](https://moment.github.io/luxon/#/) DateTime class, using a payload plugin.
 
   ```ts [plugins/date-time-payload.ts]

docs/3.api/2.composables/use-state.md

@@ -25,6 +25,10 @@ Because the data inside `useState` will be serialized to JSON, it is important t
 `useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+Watch a video from Alexander Lichter about why and when to use `useState()`.
+::
+
 ## Using `shallowRef`
 
 If you don't need your state to be deeply reactive, you can combine `useState` with [`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref). This can improve performance when your state contains large objects and arrays.