feat(nuxt, schema): add <NoScript> component and noscript typings (…

…#6139)

docs/content/3.api/1.composables/use-head.md

@@ -4,7 +4,7 @@
 
 Nuxt provides a composable to update the head properties of your page with an [`MetaObject`](/api/composables/use-head/#metaobject) of meta properties with keys corresponding to meta tags:
 
-`title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
+`title`, `base`, `script`, `noscript`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
 
 ```js
 useHead(options: MetaObject)
@@ -43,5 +43,6 @@ export default {
 * **link**: array, each item maps to a newly-created `<link>` element, where object properties map to attributes.
 * **style**: array, each item maps to a newly-created `<style>` element, where object properties map to attributes.
 * **script**: array, each item maps to a newly-created `<script>` element, where object properties map to attributes.
+* **noscript**: array, each item maps to a newly-created `<noscript>` element, where object properties map to attributes.
 
 All elements in the meta object are optional. You can also pass only single values.

packages/nuxt/src/head/runtime/components.ts

@@ -86,6 +86,29 @@ export const Script = defineComponent({
   }))
 })
 
+// <noscript>
+export const NoScript = defineComponent({
+  name: 'NoScript',
+  inheritAttrs: false,
+  props: {
+    ...globalProps,
+    title: String
+  },
+  setup: setupForUseMeta((props, { slots }) => {
+    const noscript = { ...props }
+    const textContent = (slots.default?.() || [])
+      .filter(({ children }) => children)
+      .map(({ children }) => children)
+      .join('')
+    if (textContent) {
+      noscript.children = textContent
+    }
+    return {
+      noscript: [noscript]
+    }
+  })
+})
+
 // <link>
 export const Link = defineComponent({
   name: 'Link',

packages/schema/src/config/_app.ts

@@ -93,6 +93,10 @@ export default {
      *       // <style type="text/css">:root { color: red }</style>
      *       { children: ':root { color: red }', type: 'text/css' }
      *     ]
+     *     noscript: [
+     *       // <noscript>Javascript is required</noscript>
+     *       { children: 'Javascript is required' }
+     *     ]
      *   }
      * }
      * ```

packages/schema/src/types/meta.ts

@@ -21,10 +21,12 @@ export interface MetaObject extends Record<string, any> {
   style?: Array<Record<string, any>>
   /** Each item in the array maps to a newly-created `<script>` element, where object properties map to attributes. */
   script?: Array<Record<string, any>>
+  /** Each item in the array maps to a newly-created `<noscript>` element, where object properties map to attributes. */
+  noscript?: Array<Record<string, any>>
 
   titleTemplate?: string | ((title: string) => string)
   title?: string
-  
+
   bodyAttrs?: Record<string, any>
   htmlAttrs?: Record<string, any>
 }