{"id":22485790,"url":"https://github.com/troxler/vue-headful","last_synced_at":"2025-08-02T18:33:36.074Z","repository":{"id":55915240,"uuid":"116847460","full_name":"troxler/vue-headful","owner":"troxler","description":" Set document title and meta tags with Vue.js","archived":true,"fork":false,"pushed_at":"2020-11-26T09:25:34.000Z","size":143,"stargazers_count":228,"open_issues_count":0,"forks_count":17,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-06-20T05:49:09.936Z","etag":null,"topics":["head","html","javascript","meta-tags","metatags","seo","sharing","title","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/troxler.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-09T17:22:48.000Z","updated_at":"2024-05-21T22:03:54.000Z","dependencies_parsed_at":"2022-08-15T09:20:36.543Z","dependency_job_id":null,"html_url":"https://github.com/troxler/vue-headful","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troxler%2Fvue-headful","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troxler%2Fvue-headful/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troxler%2Fvue-headful/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troxler%2Fvue-headful/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/troxler","download_url":"https://codeload.github.com/troxler/vue-headful/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499975,"owners_count":17929991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["head","html","javascript","meta-tags","metatags","seo","sharing","title","vue","vuejs"],"created_at":"2024-12-06T17:13:14.243Z","updated_at":"2024-12-06T17:14:58.523Z","avatar_url":"https://github.com/troxler.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["元标签","UI Utilities","Meta Tags"],"readme":"# vue-headful\n\nvue-headful allows to set the title and several meta tags of your document from any Vue.js view.\nvue-headful is a tiny wrapper around [Headful](https://github.com/troxler/headful), a generic library to set meta tags with JavaScript.\n\n## Install\n\n```\nnpm i vue-headful\n```\n\n## Usage\n\nRegister the component:\n\n```js\nimport Vue from 'vue';\nimport vueHeadful from 'vue-headful';\n\nVue.component('vue-headful', vueHeadful);\n\nnew Vue({\n    // your configuration\n});\n```\n\nAnd then use the `vue-headful` component in every of your views:\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cvue-headful\n            title=\"Title from vue-headful\"\n            description=\"Description from vue-headful\"\n        /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Documentation\n\nvue-headful is only a wrapper around [Headful](https://github.com/troxler/headful) and by itself does not do that much.\nvue-headful supports all the [head properties that are supported by Headful](https://github.com/troxler/headful#documentation).\nYou can find a non-complete list of head properties in the following example:\n\n```html\n\u003cvue-headful\n    title=\"\"\n    description=\"\"\n    keywords=\"\"\n    image=\"\"\n    lang=\"\"\n    ogLocale=\"\"\n    url=\"\"\n/\u003e\n```\n\nIf there are any other head properties or attributes you want to set, you can use `html` (for arbitrary elements in the whole document) or `head` (for elements within `\u003chead\u003e`) as follows.\nThe selectors can be any valid CSS selector.\n\n```html\n\u003cvue-headful\n    :html=\"{\n        body: {id: 'aPageId'},\n        h1: {'data-foo': 'bar'},\n    }\"\n    :head=\"{\n        'meta[charset]': {charset: 'utf-8'},\n    }\"\n/\u003e\n\n\u003c!-- Results in:\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n\u003c/head\u003e\n\u003cbody id=\"aPageId\"\u003e\n\u003ch1 data-foo=\"bar\"\u003e\u003c/h1\u003e\n--\u003e\n```\n\nIf you want to **remove a previously defined attribute from an element**, you can set it to `null` as in the example below:\n\n```html\n\u003cvue-headful :title=\"null\"/\u003e\n\u003c!-- Results in:\n\u003ctitle\u003e\u003c/title\u003e\n\u003cmeta itemprop=\"name\"\u003e\n\u003cmeta property=\"og:title\"\u003e\n\u003cmeta name=\"twitter:title\"\u003e\n--\u003e\n```\n\nNote that neither Headful nor vue-headful add missing HTML elements, they only add attribute values.\nSo it is important that you add everything that you want to have populated in your HTML first.\nFor example, to specify the title and description you have to prepare the HTML as follows.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003e\u003c/title\u003e\n    \u003cmeta itemprop=\"name\"\u003e\n    \u003cmeta property=\"og:title\"\u003e\n    \u003cmeta name=\"twitter:title\"\u003e\n    \u003cmeta name=\"description\"/\u003e\n    \u003cmeta itemprop=\"description\"\u003e\n    \u003cmeta property=\"og:description\"\u003e\n    \u003cmeta name=\"twitter:description\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c!-- ... --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nvue-headful also supports dynamic properties (e.g. `v-bind:title=\"variableName\"` or `:title=\"variableName\"`) and adds watchers to everything.\nThat means you can also set head properties asynchronously, for example after an API request.\n\n```html\n\u003ctemplate\u003e\n    \u003cvue-headful\n        :title=\"title\"\n        description=\"Static description\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        data() {\n            return {\n                title: 'Dynamic title',\n            };\n        },\n        mounted() {\n            // dummy async operation to show watcher on properties\n            setTimeout(() =\u003e {\n                this.title = 'Dynamic async title';\n            }, 3000);\n        },\n    };\n\u003c/script\u003e\n```\n\nAlso see the non-complete list of meta tags and other head properties you can define using vue-headful:\n\n* `\u003chtml lang\u003e`\n* `\u003ctitle\u003e`\n* `\u003cmeta name=\"description\"\u003e`\n* `\u003cmeta itemprop=\"description\"\u003e`\n* `\u003cmeta property=\"og:description\"\u003e`\n* `\u003cmeta name=\"twitter:description\"\u003e`\n* `\u003cmeta name=\"keywords\"\u003e`\n* `\u003cmeta itemprop=\"image\"\u003e`\n* `\u003cmeta property=\"og:image\"\u003e`\n* `\u003cmeta name=\"twitter:image\"\u003e`\n* `\u003cmeta property=\"og:locale\"\u003e`\n* `\u003clink rel=\"canonical\"\u003e`\n* `\u003cmeta property=\"og:url\"\u003e`\n* `\u003cmeta name=\"twitter:url\"\u003e`\n\nFor more information on everything you can put into `\u003chead\u003e`, have a look at \u003chttps://gethead.info/\u003e.\n\n\n## Compatibility\n\nvue-headful works with every current and most reasonably old web browsers.\nIf you need to support older browsers including Internet Explorer, have a look at [Headful: Compatibility](https://github.com/troxler/headful#compatibility).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroxler%2Fvue-headful","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftroxler%2Fvue-headful","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroxler%2Fvue-headful/lists"}