{"id":13432591,"url":"https://github.com/ktquez/vue-head","last_synced_at":"2025-05-15T04:06:39.565Z","repository":{"id":45441101,"uuid":"60439154","full_name":"ktquez/vue-head","owner":"ktquez","description":"Manager the meta information of the head tag, a simple and easy way","archived":false,"fork":false,"pushed_at":"2023-06-08T22:12:04.000Z","size":106,"stargazers_count":984,"open_issues_count":8,"forks_count":73,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-06T09:09:01.783Z","etag":null,"topics":["head","meta-tags","vue"],"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/ktquez.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-05T02:14:34.000Z","updated_at":"2025-02-16T14:07:55.000Z","dependencies_parsed_at":"2024-06-18T12:38:18.691Z","dependency_job_id":"92af840c-1b1b-4e45-9202-3e9b184e0cb2","html_url":"https://github.com/ktquez/vue-head","commit_stats":{"total_commits":70,"total_committers":14,"mean_commits":5.0,"dds":0.2857142857142857,"last_synced_commit":"1c179fe5f6828f7c6310eef214a983c237f929d9"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-head","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-head/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-head/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-head/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktquez","download_url":"https://codeload.github.com/ktquez/vue-head/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270646,"owners_count":22042859,"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","meta-tags","vue"],"created_at":"2024-07-31T02:01:13.865Z","updated_at":"2025-05-15T04:06:34.547Z","avatar_url":"https://github.com/ktquez.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","UI Utilities","Awesome Vue.js","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","元标签","UI Utilities","Meta Tags"],"readme":"# vue-head\r\n\r\nManipulating the meta information of the head tag, a simple and easy way  \r\nMotivated by [HEAD](https://github.com/joshbuchea/HEAD)\r\n\r\n---\r\n\r\n**For syntax of the previous version [click here](https://github.com/ktquez/vue-head/tree/v1.0.5)**\r\n\r\n---\r\n\r\n## Usage\r\n**by CDN**\r\n```html\r\n...\r\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/*version*/vue.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue-router/*version*/vue-router.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.rawgit.com/ktquez/vue-head/master/vue-head.js\"\u003e\u003c/script\u003e\r\n\u003cscript\u003e\r\n  // Code here\r\n\u003c/script\u003e\r\n```\r\nSee how to use with [this example](https://github.com/ktquez/vue-head/blob/master/example/index.html)\r\n\r\n\r\n**With NPM**\r\n```shell\r\nnpm install vue-head --save\r\n```\r\n\r\n```javascript\r\nimport Vue from 'vue'\r\nimport VueRouter from 'vue-router'\r\nimport VueHead from 'vue-head'\r\n\r\nVue.use(VueHead)\r\nVue.use(VueRouter)\r\n...\r\n```\r\n\r\n## Examples (New syntax)\r\n```javascript\r\nvar myComponent = Vue.extend({\r\n  data: function () {\r\n    return {\r\n      ...\r\n    }\r\n  },\r\n  head: {\r\n    title: {\r\n      inner: 'It will be a pleasure'\r\n    },\r\n    // Meta tags\r\n    meta: [\r\n      { name: 'application-name', content: 'Name of my application' },\r\n      { name: 'description', content: 'A description of the page', id: 'desc' }, // id to replace intead of create element\r\n      // ...\r\n      // Twitter\r\n      { name: 'twitter:title', content: 'Content Title' },\r\n      // with shorthand\r\n      { n: 'twitter:description', c: 'Content description less than 200 characters'},\r\n      // ...\r\n      // Google+ / Schema.org\r\n      { itemprop: 'name', content: 'Content Title' },\r\n      { itemprop: 'description', content: 'Content Title' },\r\n      // ...\r\n      // Facebook / Open Graph\r\n      { property: 'fb:app_id', content: '123456789' },\r\n      { property: 'og:title', content: 'Content Title' },\r\n      // with shorthand\r\n      { p: 'og:image', c: 'https://example.com/image.jpg' },\r\n      // ...\r\n    ],\r\n    // link tags\r\n    link: [\r\n      { rel: 'canonical', href: 'http://example.com/#!/contact/', id: 'canonical' },\r\n      { rel: 'author', href: 'author', undo: false }, // undo property - not to remove the element\r\n      { rel: 'icon', href: require('./path/to/icon-16.png'), sizes: '16x16', type: 'image/png' }, \r\n      // with shorthand\r\n      { r: 'icon', h: 'path/to/icon-32.png', sz: '32x32', t: 'image/png' },\r\n      // ...\r\n    ],\r\n    script: [\r\n      { type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body\r\n      // with shorthand\r\n      { t: 'application/ld+json', i: '{ \"@context\": \"http://schema.org\" }' },\r\n      // ...\r\n    ],\r\n    style: [\r\n      { type: 'text/css', inner: 'body { background-color: #000; color: #fff}', undo: false },\r\n      // ...\r\n    ]\r\n  }\r\n})\r\n```\r\n\r\nTo learn more possibilities tags in [HEAD](https://github.com/joshbuchea/HEAD)\r\n\r\n## Example with files .vue\r\n\r\n```html\r\n\u003ctemplate\u003e\r\n  \u003c!-- Code here --\u003e\r\n\u003c/template\u003e\r\n```\r\n```javascript\r\nexport default {\r\n  data: function () {\r\n    return {\r\n      title: 'My Title'\r\n    }\r\n  },\r\n  // Usage with context the component\r\n  head: {\r\n    // To use \"this\" in the component, it is necessary to return the object through a function\r\n    title: function () {\r\n      return {\r\n        inner: this.title\r\n      }\r\n    },\r\n    meta: [\r\n      { name: 'description', content: 'My description', id: 'desc' }\r\n    ]\r\n  }\r\n    ...\r\n  }\r\n}\r\n```\r\n```css\r\n\u003cstyle scoped\u003e\r\n  /* Code here */\r\n\u003c/style\u003e\r\n```\r\nFor more questions, [check this example](https://github.com/ktquez/vue-head/blob/master/example/index.html)\r\n\r\n## Custom title\r\nYou can customize the page title with tab and complement, just add the properties `separator` and `complement` object in title\r\nSeparator by default uses the pipe character `|` and complement by default uses the title of the html document  \r\n\r\n```javascript\r\nhead: {\r\n  title: {\r\n    inner: 'My title',\r\n    separator: '-',\r\n    complement: 'My Complement'\r\n  },\r\n  //omited\r\n}\r\n```\r\n*If not please complement defines an empty value*\r\n\r\n## Default custom title\r\nIf you'd like to set default custom title options on every component you can pass options to VueHead when you're registering it for Vue, just like in example below.\r\n```javascript\r\nconst VueHead = require('vue-head')\r\n\r\nVue.use(VueHead, {\r\n  separator: '-',\r\n  complement: 'My Complement'\r\n})\r\n```\r\n\r\n## Using `this`\r\nFor using values with `this`, it is necessary to return the object through a function\r\n```javascript\r\ndata: {\r\n  myData: 'My description'\r\n},\r\n// omited\r\nmeta: function () {\r\n  return [\r\n    { name: 'description', content: this.myData }\r\n  ]\r\n}\r\n\r\n``` \r\n\r\nThe whole `head` option can be a function.\r\n\r\n## Undo elements\r\nAll created tags will be removed as you leave the component, but you may want it to be not broken and remain in the DOM.   \r\nSo you should set `undo: false`\r\n```javascript\r\nstyle: [\r\n  { type: 'text/css', inner: 'body { background-color: #000; color: #fff}', undo: false }\r\n]\r\n```\r\n\r\n## Replace content the elements\r\nThere are some tags that are unique and that only need to update the content, such as meta tags `name=\"description\"` or `rel=\"canonical\"`.  \r\nTherefore, it is necessary to define a `id`, so that the element is found and is made the update correctly, avoiding duplicates tags.  \r\n```javascript\r\nmeta: [\r\n  { name: 'description', content: 'A description of the page', id: 'desc' }\r\n]\r\n```\r\n\r\n## Event emitted \r\n### Vue 1.*\r\nAt some point you may want to do something after the DOM is complete with the changes, to this the vue-head emits through the key `okHead`.  \r\nWith this, you can hear through the `events` option of your instance component.\r\n```javascript\r\n// omited\r\nevents: {\r\n  okHead: function () {\r\n    // Do something\r\n  }\r\n},\r\n```\r\n### Vue 2.*\r\n```javascript\r\ncreated: function () {\r\n  this.$on('okHead', function () {\r\n    // Do Something\r\n  });\r\n}\r\n```\r\n\r\n## Update elements with asynchronous data or after page loaded\r\nKeep the data tags updated through an update of the elements that have changed data, which are the reactive data of your component.\r\nIt is not automatic if you want to upgrade, simply issue the event `updateHead` soon after changing your data.\r\n\r\nFor example:  \r\n```javascript\r\n// omited\r\nmethods: {\r\n  getAsyncData: function () {\r\n    var self = this\r\n    window.setTimeout(function () {\r\n      self.title = 'My async title'\r\n      self.$emit('updateHead')\r\n    }, 3000)\r\n  }\r\n},\r\n```\r\n\r\n***Note: I recommend you use the vueRouter to request the data from the tags and build the header tags with synchronous data, updating real-time meta tags only have to use the business rules of your application.***\r\n\r\n\r\n## Keep alive\r\nSupported only in Vue next \u003e2.0.*, Because it uses the new hooks activated and deactivated.  \r\n*Obs: In version \u003c1.0. * Using making prompt to maintain the element in the document.* \r\n\r\n\r\n## Shorthand property\r\n\r\nproperty        | shorthand     | used tags\r\n--------------- | ------------- | ------------\r\ncharset         | `ch`          | `meta`\r\ntarget          | `tg`          | `base` \r\nname            | `n`           | `meta`\r\nhttp-equiv      | `he`          | `meta`\r\nitemprop        | `ip`          | `meta`\r\ncontent         | `c`           | `meta`\r\nproperty        | `p`           | `meta`\r\nrel             | `r`           | `link`\r\nhref            | `h`           | `link`\r\nsizes           | `sz`          | `link`\r\ntype            | `t`           | `link` `style`  `script`\r\nscheme          | `sc`          | `script`\r\nsrc             | `s`           | `script`\r\nasync           | `a`           | `script`\r\ndefer           | `d`           | `script`\r\ninner           | `i`           | `script` `style` \r\n\r\n## Support \r\n- Vue.js 2.0.*\r\n- Vue.js 1.0.*\r\n\r\n## Contributing\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.\r\n- Fork repository, make changes, add your name and link in the authors session readme.md\r\n- Send a pull request\r\n\r\nIf you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)\r\n\r\n**thank you**\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktquez%2Fvue-head","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktquez%2Fvue-head","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktquez%2Fvue-head/lists"}