chore: lint docs

danielroe · danielroe · commit 352bdbc93688 · 2025-11-06T22:41:24.000Z
diff --git a/docs/2.guide/1.directory-structure/3.tsconfig.md b/docs/2.guide/1.directory-structure/3.tsconfig.md
@@ -22,3 +22,26 @@ As you need to, you can customize the contents of this file. However, it is reco
 ::note
 If you need to customize your `paths`, this will override the auto-generated path aliases. Instead, we recommend that you add any path aliases you need to the [`alias`](/docs/3.x/api/nuxt-config#alias) property within your `nuxt.config`, where they will get picked up and added to the auto-generated `tsconfig`.
 ::
+
+## Extending TypeScript Configuration
+
+You can customize the TypeScript configuration of your Nuxt project for each context (`app` and `server`) in the `nuxt.config.ts` file.
+<!-- @case-police-ignore tsConfig -->
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  typescript: {
+    // customize tsconfig.app.json
+    tsConfig: {
+      // ...
+    },
+  },
+  nitro: {
+    typescript: {
+      // customize tsconfig.server.json
+      tsConfig: {
+        // ...
+      },
+    },
+  },
+})
+```
diff --git a/docs/3.api/2.composables/use-head-safe.md b/docs/3.api/2.composables/use-head-safe.md
@@ -12,22 +12,6 @@ links:
 
 The `useHeadSafe` composable is a wrapper around the [`useHead`](/docs/3.x/api/composables/use-head) composable that restricts the input to only allow safe values. This is the recommended way to manage head data when working with user input, as it prevents XSS attacks by sanitizing potentially dangerous attributes.
 
-```vue [app/app.vue]
-<script setup lang="ts">
-useHeadSafe({
-  script: [
-    { id: 'xss-script', innerHTML: 'alert("xss")' },
-  ],
-  meta: [
-    { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' },
-  ],
-})
-// Will safely generate
-// <script id="xss-script"></script>
-// <meta content="0;javascript:alert(1)">
-</script>
-```
-
 ::warning
 When using `useHeadSafe`, potentially dangerous attributes like `innerHTML` in scripts or `http-equiv` in meta tags are automatically stripped out to prevent XSS attacks. Use this composable whenever you're working with user-generated content.
 ::
@@ -69,7 +53,7 @@ This composable does not return any value.
 ```vue [app/pages/user-profile.vue]
 <script setup lang="ts">
 // User-generated content that might contain malicious code
-const userBio = ref('<script>alert("xss")</script>')
+const userBio = ref('<script>alert("xss")<' + '/script>')
 
 useHeadSafe({
   title: `User Profile`,
diff --git a/docs/3.api/2.composables/use-head.md b/docs/3.api/2.composables/use-head.md
@@ -17,12 +17,12 @@ The `useHead` composable allows you to manage your head tags in a programmatic a
 useHead({
   title: 'My App',
   meta: [
-    { name: 'description', content: 'My amazing site.' }
+    { name: 'description', content: 'My amazing site.' },
   ],
   bodyAttrs: {
-    class: 'test'
+    class: 'test',
   },
-  script: [{ innerHTML: 'console.log(\'Hello world\')' }]
+  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
 })
 </script>
 ```
@@ -88,8 +88,8 @@ useHead({
   meta: [
     { name: 'description', content: 'Learn more about our company' },
     { property: 'og:title', content: 'About Us' },
-    { property: 'og:description', content: 'Learn more about our company' }
-  ]
+    { property: 'og:description', content: 'Learn more about our company' },
+  ],
 })
 </script>
 ```
@@ -103,11 +103,11 @@ const profile = ref({ name: 'John Doe' })
 useHead({
   title: computed(() => profile.value.name),
   meta: [
-    { 
-      name: 'description', 
-      content: computed(() => `Profile page for ${profile.value.name}`) 
-    }
-  ]
+    {
+      name: 'description',
+      content: computed(() => `Profile page for ${profile.value.name}`),
+    },
+  ],
 })
 </script>
 ```
@@ -121,8 +121,8 @@ const count = ref(0)
 useHead(() => ({
   title: `Count: ${count.value}`,
   meta: [
-    { name: 'description', content: `Current count is ${count.value}` }
-  ]
+    { name: 'description', content: `Current count is ${count.value}` },
+  ],
 }))
 </script>
 ```
@@ -135,15 +135,15 @@ useHead({
   link: [
     {
       rel: 'stylesheet',
-      href: 'https://cdn.example.com/styles.css'
-    }
+      href: 'https://cdn.example.com/styles.css',
+    },
   ],
   script: [
     {
       src: 'https://cdn.example.com/script.js',
-      async: true
-    }
-  ]
+      async: true,
+    },
+  ],
 })
 </script>
 ```
@@ -157,11 +157,11 @@ const isDark = ref(true)
 useHead({
   htmlAttrs: {
     lang: 'en',
-    class: computed(() => isDark.value ? 'dark' : 'light')
+    class: computed(() => isDark.value ? 'dark' : 'light'),
   },
   bodyAttrs: {
-    class: 'themed-page'
-  }
+    class: 'themed-page',
+  },
 })
 </script>
 ```
diff --git a/docs/3.api/2.composables/use-lazy-async-data.md b/docs/3.api/2.composables/use-lazy-async-data.md
@@ -23,9 +23,15 @@ const { status, data: posts } = await useLazyAsyncData('posts', () => $fetch('/a
 
 <template>
   <div>
-    <div v-if="status === 'pending'">Loading...</div>
-    <div v-else-if="status === 'error'">Error loading posts</div>
-    <div v-else>{{ posts }}</div>
+    <div v-if="status === 'pending'">
+      Loading...
+    </div>
+    <div v-else-if="status === 'error'">
+      Error loading posts
+    </div>
+    <div v-else>
+      {{ posts }}
+    </div>
   </div>
 </template>
 ```
