@fallemand/head - npm Package Compare versions

Comparing version 0.7.7-beta.1 to 0.7.7

package.json

		{
		"name": "@fallemand/head",
		"version": "0.7.7-beta.1",
		"version": "0.7.7",
		"license": "MIT",
		@@ -22,9 +22,2 @@ "description": "Document head manager for Vue 3. SSR ready.",
		],
		"scripts": {
		"test": "node -r esbuild-register scripts/run-test.ts",
		"example": "vite example",
		"build": "tsup src/index.ts --format esm,cjs --dts",
		"prepublishOnly": "npm run build",
		"test:e2e": "ava"
		},
		"repository": {
		@@ -84,3 +77,10 @@ "type": "git",
		"vue": ">=3"
		}
		}
		},
		"scripts": {
		"test": "node -r esbuild-register scripts/run-test.ts",
		"example": "vite example",
		"build": "tsup src/index.ts --format esm,cjs --dts",
		"test:e2e": "ava"
		},
		"readme": "# @vueuse/head\n\n[![npm version](https://badgen.net/npm/v/@vueuse/head)](https://npm.im/@vueuse/head) [![npm downloads](https://badgen.net/npm/dm/@vueuse/head)](https://npm.im/@vueuse/head)\n\nDocument head manager for Vue 3.\n\n`@vueuse/head` is a [Vue composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) that helps you manage `<title>`, `<meta>` and other elements inside document head, it has no dependencies and we always try to keep it as slim as possible.\n\n💛 Support the ongoing development of this project by [becoming a GitHub Sponsor](https://github.com/sponsors/egoist).\n\n## Installation\n\n```bash\nnpm i @vueuse/head\n# Or Yarn\nyarn add @vueuse/head\n```\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, computed, 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: computed(() => siteData.title),\n meta: [\n {\n name: `description`,\n content: computed(() => 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 } = 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 </body>\n\n</html>\n`\n```\n\n## API\n\n### `createHead()`\n\nCreate the head manager instance.\n\n### `useHead(head: HeadObject \| Ref<HeadObject>)`\n\n```ts\ninterface HeadObject {\n title?: MaybeRef<string>\n meta?: MaybeRef<HeadAttrs[]>\n link?: MaybeRef<HeadAttrs[]>\n base?: MaybeRef<HeadAttrs>\n style?: MaybeRef<HeadAttrs[]>\n script?: MaybeRef<HeadAttrs[]>\n htmlAttrs?: MaybeRef<HeadAttrs>\n bodyAttrs?: MaybeRef<HeadAttrs>\n}\n\ninterface HeadAttrs {\n [attrName: string]: any\n}\n```\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\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})\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### `<Head>`\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### `renderHeadToString(head: Head)`\n\n- Returns: `HTMLResult`\n\n```ts\ninterface 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}\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 © [EGOIST](https://egoist.sh)\n"
		}

@fallemand/head - npm Package Compare versions

Improved metrics