docs: add mentions on Vue School tutorials (#25997)

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

@@ -56,3 +56,7 @@ modules/
 ```
 
 :read-more{to="/docs/guide/going-further/modules"}
+
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch" target="_blank"}
+Watch Vue School video about Nuxt private modules.
+::

docs/2.guide/3.going-further/3.modules.md

@@ -30,6 +30,10 @@ This will create a `my-module` project with all the boilerplate necessary to dev
 
 Learn how to perform basic tasks with the module starter.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/navigating-the-official-starter-template" target="_blank"}
+Watch Vue School video about Nuxt module starter template.
+::
+
 #### How to Develop
 
 While your module source code lives inside the `src` directory, in most cases, to develop a module, you need a Nuxt application. That's what the `playground` directory is about. It's a Nuxt application you can tinker with that is already configured to run with your module.
@@ -255,6 +259,10 @@ export default defineNuxtModule({
 
 When you need to handle more complex configuration alterations, you should consider using [defu](https://github.com/unjs/defu).
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options" target="_blank"}
+Watch Vue School video about altering Nuxt configuration.
+::
+
 #### Exposing Options to Runtime
 
 Because modules aren't part of the application runtime, their options aren't either. However, in many cases, you might need access to some of these module options within your runtime code. We recommend exposing the needed config using Nuxt's [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig).
@@ -288,6 +296,10 @@ Be careful not to expose any sensitive module configuration on the public runtim
 
 :read-more{to="/docs/guide/going-further/runtime-config"}
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/passing-and-exposing-module-options" target="_blank"}
+Watch Vue School video about passing and exposing Nuxt module options.
+::
+
 #### Injecting Plugins With `addPlugin`
 
 Plugins are a common way for a module to add runtime logic. You can use the `addPlugin` utility to register them from your module.
@@ -511,6 +523,10 @@ export default defineNuxtModule({
 
 :read-more{to="/docs/api/advanced/hooks"}
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks" target="_blank"}
+Watch Vue School video about using Nuxt lifecycle hooks in modules.
+::
+
 ::note
 **Module cleanup**
 :br
@@ -733,6 +749,10 @@ The module starter comes with a default set of tools and configurations (e.g. ES
 
 [Nuxt Module ecosystem](/modules) represents more than 15 million monthly NPM downloads and provides extended functionalities and integrations with all sort of tools. You can be part of this ecosystem!
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types" target="_blank"}
+Watch Vue School video about Nuxt module types.
+::
+
 ### Module Types
 
 **Official modules** are modules prefixed (scoped) with `@nuxt/` (e.g. [`@nuxt/content`](https://content.nuxtjs.org)). They are made and maintained actively by the Nuxt team. Like with the framework, contributions from the community are more than welcome to help make them better!

docs/3.api/5.kit/12.resolving.md

@@ -211,6 +211,10 @@ Type of path to resolve. If set to `'file'`, the function will try to resolve a
 
 Creates resolver relative to base path.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app" target="_blank"}
+Watch Vue School video about createResolver.
+::
+
 ### Type
 
 ```ts

docs/3.api/5.kit/4.autoimports.md

@@ -18,6 +18,10 @@ These functions are designed for registering your own utils, composables and Vue
 
 Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins. Composables or plugins can use these functions.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports" target="_blank"}
+Watch Vue School video about Auto-imports Nuxt Kit utilities.
+::
+
 ## `addImports`
 
 Add imports to the Nuxt application. It makes your imports available in the Nuxt application without the need to import them manually.

docs/3.api/5.kit/5.components.md

@@ -10,6 +10,10 @@ links:
 
 Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface. In Nuxt, components from the components directory are automatically imported by default. However, if you need to import components from an alternative directory or wish to selectively import them as needed, `@nuxt/kit` provides the `addComponentsDir` and `addComponent` methods. These utils allow you to customize the component configuration to better suit your needs.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-components-and-component-directories" target="_blank"}
+Watch Vue School video about injecting components.
+::
+
 ## `addComponentsDir`
 
 Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify `global: true` option.

docs/3.api/5.kit/7.pages.md

@@ -12,6 +12,10 @@ links:
 
 In Nuxt 3, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt 3 offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages" target="_blank"}
+Watch Vue School video about extendPages.
+::
+
 ### Type
 
 ```ts
@@ -67,6 +71,10 @@ Nuxt is powered by the [Nitro](https://nitro.unjs.io) server engine. With Nitro,
 You can read more about Nitro route rules in the [Nitro documentation](https://nitro.unjs.io/guide/routing#route-rules).
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares" target="_blank"}
+Watch Vue School video about adding route rules and route middelwares.
+::
+
 ### Type
 
 ```ts
@@ -184,6 +192,10 @@ Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/doc
 Read more about route middlewares in the [Route middleware documentation](/docs/getting-started/routing#route-middleware).
 ::
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares" target="_blank"}
+Watch Vue School video about adding route rules and route middelwares.
+::
+
 ### Type
 
 ```ts

docs/3.api/5.kit/9.plugins.md

@@ -14,6 +14,10 @@ Plugins are self-contained code that usually add app-level functionality to Vue.
 
 Registers a Nuxt plugin and to the plugins array.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugins" target="_blank"}
+Watch Vue School video about addPlugin.
+::
+
 ### Type
 
 ```ts
@@ -110,6 +114,10 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 Adds a template and registers as a nuxt plugin. This is useful for plugins that need to generate code at build time.
 
+::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugin-templates" target="_blank"}
+Watch Vue School video about addPluginTemplate.
+::
+
 ### Type
 
 ```ts