docs: improve components page

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

@@ -17,7 +17,7 @@ Nuxt automatically imports any components in your `components/` directory (along
 --| TheFooter.vue
 ```
 
-```html{}[layouts/default.vue]
+```html [layouts/default.vue]
 <template>
   <div>
     <TheHeader />
@@ -31,7 +31,7 @@ Nuxt automatically imports any components in your `components/` directory (along
 
 By default, only the `~/components` directory is scanned. If you want to add other directories, or change how the components are scanned within a subfolder of this directory, you can add additional directories to the configuration:
 
-```js
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   components: [
     { path: '~/components/special-components', prefix: 'Special' },
@@ -119,7 +119,6 @@ If you are using `resolveComponent` to handle dynamic components, make sure not
 Alternatively, though not recommended, you can register all your components globally, which will create async chunks for all your components and make them available throughout your application.
 
 ```diff
-
   export default defineNuxtConfig({
     components: {
 +     global: true,
@@ -138,7 +137,7 @@ The `global` option can also be set per component directory.
 
 To dynamically import a component (also known as lazy-loading a component) all you need to do is add the `Lazy` prefix to the component's name.
 
-```html{}[layouts/default.vue]
+```html [layouts/default.vue]
 <template>
   <div>
     <TheHeader />
@@ -150,7 +149,7 @@ To dynamically import a component (also known as lazy-loading a component) all y
 
 This is particularly useful if the component is not always needed. By using the `Lazy` prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
 
-```html{}[pages/index.vue]
+```html [pages/index.vue]
 <template>
   <div>
     <h1>Mountains</h1>
@@ -174,7 +173,7 @@ export default {
 
 You can also explicitly import components from `#components` if you want or need to bypass Nuxt's auto-importing functionality.
 
-```html{}[pages/index.vue]
+```html [pages/index.vue]
 <template>
   <div>
     <h1>Mountains</h1>
@@ -194,7 +193,7 @@ You can also explicitly import components from `#components` if you want or need
 
 Nuxt provides the `<ClientOnly>` component for purposely rendering a component only on client side. To import a component only on the client, register the component in a client-side only plugin.
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <Sidebar />
@@ -208,7 +207,7 @@ Nuxt provides the `<ClientOnly>` component for purposely rendering a component o
 
 Use a slot as fallback until `<ClientOnly>` is mounted on client side.
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <Sidebar />
@@ -239,7 +238,7 @@ If a component is meant to be rendered only client-side, you can add the `.clien
 --| Comments.client.vue
 ```
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <!-- this component will only be rendered on client side -->
@@ -264,6 +263,10 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
 
 Standalone server components will always be rendered on the server. When their props update, this will result in a network request that will update the rendered HTML in-place.
 
+:video-player{src="https://www.youtube.com/watch?v=u1yyXe86xJM"}
+
+> A video made by [LearnVue](https://go.learnvue.co) for the Nuxt documentation.
+
 Server components are currently experimental and in order to use them, you need to enable the 'component islands' feature in your nuxt.config:
 
 ```ts [nuxt.config.ts]
@@ -281,7 +284,7 @@ Now you can register server-only components with the `.server` suffix and use th
 --| HighlightedMarkdown.server.vue
 ```
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <!--
@@ -307,7 +310,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 --| Comments.server.vue
 ```
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <!-- this component will render Comments.server server-side then Comments.client once mounted in client-side -->
@@ -326,7 +329,7 @@ Nuxt provides the `<DevOnly>` component to render a component only during develo
 
 The content will not be included in production builds and tree-shaken.
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <Sidebar />
@@ -343,7 +346,7 @@ The content will not be included in production builds and tree-shaken.
 Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
 You can specify a `fallbackTag` to make it render a specific tag if it fails to render on the server.
 
-```html{}[pages/example.vue]
+```html [pages/example.vue]
 <template>
   <div>
     <Sidebar />
@@ -378,16 +381,16 @@ Imagine a directory structure like this:
 
 Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:
 
-```js
-import { defineNuxtModule } from '@nuxt/kit'
-import { fileURLToPath } from 'node:url'
+```ts
+import { defineNuxtModule, createResolver } from '@nuxt/kit'
 
 export default defineNuxtModule({
   hooks: {
-    'components:dirs'(dirs) {
+    'components:dirs': (dirs) => {
+      const { resolve } = createResolver(import.meta.url)
       // Add ./components dir to the list
       dirs.push({
-        path: fileURLToPath(new URL('./components', import.meta.url)),
+        path: fileURLToPath(resolve('./components')),
         prefix: 'awesome'
       })
     }
@@ -397,10 +400,10 @@ export default defineNuxtModule({
 
 That's it! Now in your project, you can import your UI library as a Nuxt module in your `nuxt.config` file:
 
-```js
-export default {
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
   modules: ['awesome-ui/nuxt']
-}
+})
 ```
 
 ... and directly use the module components (prefixed with `awesome-`) in our `pages/index.vue`:
@@ -416,5 +419,4 @@ export default {
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-::LinkExample{link="/docs/examples/auto-imports/components"}
-::
+:LinkExample{link="/docs/examples/auto-imports/components"}