{"bugs":{"url":"https://github.com/vueuse/head/issues"},"dist":{"shasum":"fbab5484cca09c2313cf11b6f7942dee57e77fcf","tarball":"https://registry.npmjs.org/@vueuse/head/-/head-1.0.0-rc.6.tgz","fileCount":6,"integrity":"sha512-WVSzewGnBo488W3A4HKAm7E07uSkip1xzwXIAyAfnUErA4iilFave2QQhsh62h9P6walVqbpD0p98eskxWxXlA==","signatures":[{"sig":"MEUCIHv2vrTTO9QoINO/3Z0gULyAjThbcKOyIdYd4xPdvLWlAiEA7EaGXYARE1e+mqfiZ08sbvHibg51Bj8rBe+Was5Gibg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRmlNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLPA/5AJv2sBNZDyoyXWEOqNKYITQIhVszUeo1phM15YT2uvNIvVgA\r\neCRHpz6VWrw26c9Ct670cJN9JeS7I4bU26pLX0yp3U1MDVGWS0HXarlGPY5F\r\nlVQIx8qNNfa+c0cVQj4lWFRvFlNyzzeLfDlZeEjMTQ1x41du5Qjxl2eFG/HQ\r\nlRRjXwfvtTM+SuUAPj9fgh+azmRsUnWk2nvViW+NwqDYT4wEVEtJ8sqfibJ3\r\n03a+FqV1EW6evlx0jzGziH2Ufs7UYmXS5G9YSHuWxAq+SAavUYzK7OQKQ09e\r\nt1Kyu57BfV5ww2HQurhzDL0+GWHzwHSmhrj15PZ60z/cmcrmQMCmi1KRoIUt\r\niMAtfHYdvkD43DMno1ZQZb64gJBtReL1r/knyS5odIDnjl456MrcsLXKka5C\r\nQADL8a4Gkn7KJ9ZAytyncrFpSEv1GK7uvUkmqKrLxlVvDQkQj7rtlOMf2MVG\r\nZpJuFGk+fIfE2t47ib+PKMIK4hivE0mCAfDzIOdE7Lg9DlMvy990ryah6Cnn\r\nXBRzPXda8SbNIbZNkVkdJdxQI1ySChA9x3PLs65zjcWLOgZEm6rCmrLwcKU+\r\nad6O3yAKAtdsk1qigmqC71PUpel06Kht420KTjJVTomPgACP9y2OfkXcaMHA\r\nSNI+UGdRenj7C/Vq7DUtk+fV+ODN+otjIlw=\r\n=jUyi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@vueuse/head","types":"dist/index.d.ts","author":{"url":"https://egoist.sh","name":"EGOIST"},"module":"dist/index.mjs","readme":"<h1 align='center'>@vueuse/head</h1>\n\n<p align=\"center\">\n<a href=\"https://www.npmjs.com/package/@vueuse/head\" target=\"__blank\"><img src=\"https://img.shields.io/npm/v/@vueuse/head?color=a1b858&label=\" alt=\"NPM version\"></a>\n<a href=\"https://www.npmjs.com/package/@vueuse/head\" target=\"__blank\"><img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@vueuse/head?color=50a36f&label=\"></a>\n<br>\n<a href=\"https://github.com/vueuse/head\" target=\"__blank\"><img alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/vueuse/head?style=social\"></a>\n</p>\n\n<p align=\"center\">\nA <a href=\"https://v3.vuejs.org/guide/composition-api-introduction.html\">Vue composition API</a> to manage your document head.\n</p>\n\n<p align=\"center\">\n<table>\n<tbody>\n<td align=\"center\">\n<img width=\"800\" height=\"0\" /><br>\nCreated by <a href=\"https://github.com/sponsors/egoist\">egoist</a>, maintained by <a href=\"https://github.com/harlan-zw\">harlan-zw</a> <br>\n<sub>💛 Support ongoing development by sponsoring us.</sub><br> \n<sub>Follow <a href=\"https://twitter.com/harlan_zw\">🐦 @harlan_zw</a> for updates  • Join <a href=\"https://discord.gg/275MBUBvgP\">Discord</a> for support</sub><br>\n<img width=\"800\" height=\"0\" />\n</td>\n</tbody>\n</table>\n</p>\n\n## Features\n\n- ✨ Best practice head with deduping and default ordering\n- 🤖 SSR ready\n- 🔨 Deeply reactive with computed getter support\n- 🌳 Fully typed with augmentation support (powered by [zhead](https://github.com/harlan-zw/zhead))\n\n## Installation\n\n```bash\nnpm i @vueuse/head\n# Or Yarn\nyarn add @vueuse/head\n```\n\n> Requires vue >= v3 or >=2.7\n\nFor instructions on setting up @vueuse/head as an integration, see [integration](#integration).\n\n## API\n\n### `useHead(head: MaybeComputedRef<HeadObject>)`\n\nUsed to modify the head of the document. You can call this function in any page or component.\n\nAll values are reactive and support ref and computed getter syntax.\n\nTo provide inner content you should use the `children` attribute.\n\n#### Example\n\n```ts\nconst myPage = ref({\n  description: 'This is my page',\n})\nconst title = ref('title')\nuseHead({\n  // ref syntax\n  title,\n  meta: [\n    // computer getter syntax  \n    { name: 'description', content: () => myPage.value.description },\n  ],\n  style: [\n    { type: 'text/css', children: 'body { background: red; }' },\n  ],\n  script: [\n    // primitive values are also fine\n    { \n      src: 'https://example.com/script.js',\n      defer: true\n    },\n  ],\n})\n```\n\n### Types\n\nYou can check [@zhead/schema](https://github.com/harlan-zw/zhead/blob/main/packages/schema/src/head.ts) for full types.\n\n```ts\ninterface HeadObject {\n  title?: MaybeRef<string>\n  titleTemplate?: MaybeRef<string> | ((title?: string) => string)\n  meta?: MaybeRef<HeadAttrs[]>\n  link?: MaybeRef<HeadAttrs[]>\n  base?: MaybeRef<HeadAttrs>\n  style?: MaybeRef<HeadAttrs[]>\n  script?: MaybeRef<HeadAttrs[]>\n  noscript?: MaybeRef<HeadAttrs[]>\n  htmlAttrs?: MaybeRef<HeadAttrs>\n  bodyAttrs?: MaybeRef<HeadAttrs>\n}\n```\n\n### `useHeadSafe(head: MaybeComputedRef<HeadObject>)`\n\nHas the same functionality as `useHead` but encodes values to prevent XSS. This is useful for inserting untrusted data from third-parties.\n\n```ts\nuseHeadSafe({\n  bodyAttrs: {\n    onfocus: 'alert(\"hello\")',\n  },\n  script: [\n    {\n      children: 'alert(\"hello world\")',\n    },\n  ],\n})\n```\n\n#### Deduping\n\nFor `meta` tags, we use `name` and `property` to prevent duplicated tags, you can instead use the `key` attribute if the same `name` or `property` is allowed:\n\n```ts\nuseHead({\n  meta: [\n    {\n      property: \"og:locale:alternate\",\n      content: \"zh\",\n      key: \"zh\",\n    },\n    {\n      property: \"og:locale:alternate\",\n      content: \"en\",\n      key: \"en\",\n    },\n  ],\n})\n```\n\n#### Body Tags\n\nTo render tags at the end of the `<body>`, set `body: true` in a HeadAttrs Object.\n\n```ts\nuseHead({\n  script: [\n    {\n      children: `console.log('Hello world!')`,\n      body: true,\n    },\n  ],\n})\n```\n\n#### Text Content\n\nTo set the `textContent` of an element, use the `children` attribute:\n\n```ts\nuseHead({\n  style: [\n    {\n      children: `body {color: red}`,\n    },\n  ],\n  noscript: [\n    {\n      children: `Javascript is required`,\n    },\n  ],\n})\n```\n\n`useHead` also takes reactive object or ref as the argument, for example:\n\n```ts\nconst head = reactive({ title: \"Website Title\" })\nuseHead(head)\n```\n\n```ts\nconst title = ref(\"Website Title\")\nuseHead({ title })\n```\n\n#### Render Priority\n\nTo set the render priority of a tag you can use the `renderPriority` attribute:\n\n```ts\nuseHead({\n  script: [\n    {\n      src: \"/not-important-script.js\",\n    },\n  ],\n})\n\nuseHead({\n  script: [\n    // will render first\n    {\n      src: \"/very-important-script.js\",\n      renderPriority: 1 // default is 10, so will be first\n    },\n  ],\n})\n```\n\nThe following special tags have default priorities:\n\n- -2 &lt;meta charset ...&gt;\n- -1 &lt;base&gt;\n- 0 &lt;meta http-equiv=&quot;content-security-policy&quot; ...&gt;\n\nAll other tags have a default priority of 10: <meta>, <script>, <link>, <style>, etc\n\n### `<Head>` component\n\nBesides `useHead`, you can also manipulate head tags using the `<Head>` component:\n\n```vue\n<script setup lang=\"ts\">\nimport { Head } from \"@vueuse/head\"\n</script>\n\n<template>\n  <Head>\n    <title>Hello World</title>\n    <base href=\"/base\" />\n    <html lang=\"en-US\" class=\"theme-dark\" />\n  </Head>\n</template>\n```\n\nNote that you need to use `<html>` and `<body>` to set `htmlAttrs` and `bodyAttrs` respectively, children for these two tags and self-closing tags like `<meta>`, `<link>` and `<base>` are also ignored.\n\n## Integration\n\nFor integrating @vueuse/head with a framework.\n\n### Examples\n\n- [Nuxt - vueuse-head.plugin.ts](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts)\n- [Vite - SSG](https://github.com/antfu/vite-ssg/blob/main/src/client/index.ts)\n\n### Usage\n\nRegister the Vue plugin:\n\n```ts\nimport { createApp } from \"vue\"\nimport { createHead } from \"@vueuse/head\"\n\nconst app = createApp()\nconst head = createHead()\n\napp.use(head)\n\napp.mount(\"#app\")\n```\n\nManage `head` with the composition API `useHead` in your component:\n\n```vue\n<script>\nimport { defineComponent, reactive } from \"vue\"\nimport { useHead } from \"@vueuse/head\"\n\nexport default defineComponent({\n  setup() {\n    const siteData = reactive({\n      title: `My website`,\n      description: `My beautiful website`,\n    })\n\n    useHead({\n      // Can be static or computed\n      title: () => siteData.title,\n      meta: [\n        {\n          name: `description`,\n          content: () => siteData.description,\n        },\n      ],\n    })\n  },\n})\n</script>\n```\n\n### Server-side rendering\n\n```ts\nimport { renderToString } from \"@vue/server-renderer\"\nimport { renderHeadToString } from \"@vueuse/head\"\n\nconst appHTML = await renderToString(yourVueApp)\n\n// `head` is created from `createHead()`\nconst { headTags, htmlAttrs, bodyAttrs, bodyTags } = renderHeadToString(head)\n\nconst finalHTML = `\n<html${htmlAttrs}>\n\n  <head>\n    ${headTags}\n  </head>\n\n  <body${bodyAttrs}>\n    <div id=\"app\">${appHTML}</div>\n    ${bodyTags}\n  </body>\n\n</html>\n`\n```\n\n### API\n\n#### `createHead(head?: HeadObject | Ref<HeadObject>)`\n\nCreate the head manager instance.\n\n### `renderHeadToString(head: Head)`\n\n- Returns: `HTMLResult`\n\n```ts\nexport interface HTMLResult {\n  // Tags in `<head>`\n  readonly headTags: string\n  // Attributes for `<html>`\n  readonly htmlAttrs: string\n  // Attributes for `<body>`\n  readonly bodyAttrs: string\n  // Tags in `<body>`\n  readonly bodyTags: string\n}\n```\n\nRender the head manager instance to HTML tags in string form.\n\n## Sponsors\n\n[![sponsors](https://sponsors-images.egoist.sh/sponsors.svg)](https://github.com/sponsors/egoist)\n\n## License\n\nMIT &copy; [EGOIST](https://egoist.sh)\n","gitHead":"5f9853c8a92202cebac336094d4514c820e69a56","license":"MIT","scripts":{"lint":"eslint \"**/*.{ts,vue,json,yml,tsx}\" --fix","test":"nuxi prepare examples/nuxt3 && vitest","build":"tsup src/index.ts --format esm,cjs --dts","release":"kanpai","test:e2e":"vitest tests/e2e","play:vite":"vite examples/vite-ssr","prepublishOnly":"npm run build"},"_npmUser":{"name":"egoist","email":"0x142857@gmail.com"},"homepage":"https://github.com/vueuse/head#readme","keywords":["vue","head","document","ssr","meta"],"repository":{"url":"git+https://github.com/vueuse/head.git","type":"git"},"_npmVersion":"8.15.0","description":"Document head manager for Vue 3. SSR ready.","directories":{},"lint-staged":{"*.{ts,vue,json,yml,tsx}":["eslint \"**/*.{ts,vue,json,yml,tsx}\" --fix"]},"maintainers":[{"name":"antfu","email":"anthonyfu117@hotmail.com"},{"name":"egoist","email":"0x142857@gmail.com"},{"name":"tahul","email":"yael@ipseity.fr"}],"resolutions":{"@vueuse/head":"link:."},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@zhead/schema":"^0.8.5","@vueuse/shared":"^9.3.0","@zhead/schema-vue":"^0.8.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@7.5.0","readmeFilename":"README.md","devDependencies":{"vue":"^3.2.40","mlly":"^0.5.16","nuxt":"3.0.0-rc.11","tsup":"^6.2.3","vite":"^3.1.6","execa":"^6.1.0","jsdom":"^20.0.1","pathe":"^0.3.9","eslint":"^8.25.0","kanpai":"^0.11.0","vitest":"^0.24.0","cheerio":"1.0.0-rc.12","@nuxt/kit":"3.0.0-rc.11","playwright":"^1.27.0","typescript":"^4.8.4","vue-router":"^4.1.5","lint-staged":"^13.0.3","get-port-please":"^2.6.1","@nuxt/test-utils":"3.0.0-rc.11","simple-git-hooks":"^2.8.0","@vue/compiler-sfc":"^3.2.40","@vitejs/plugin-vue":"^3.1.2","@antfu/eslint-config":"^0.27.0","@vue/server-renderer":"^3.2.40","@vitejs/plugin-vue-jsx":"^2.0.1"},"peerDependencies":{"vue":">=2.7 || >=3"},"simple-git-hooks":{"pre-commit":"npx lint-staged"},"_npmOperationalInternal":{"tmp":"tmp/head_1.0.0-rc.6_1665558861064_0.9160820852421001","host":"s3://npm-registry-packages"},"_id":"@vueuse/head@1.0.0-rc.6","version":"1.0.0-rc.6"}