{"id":13773800,"url":"https://github.com/vinicius73/vue-page-title","last_synced_at":"2025-04-04T16:16:43.743Z","repository":{"id":32632377,"uuid":"138427044","full_name":"vinicius73/vue-page-title","owner":"vinicius73","description":"Vue.js html/page title manager","archived":false,"fork":false,"pushed_at":"2023-10-15T00:01:15.000Z","size":4880,"stargazers_count":128,"open_issues_count":15,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T21:22:10.497Z","etag":null,"topics":["document","head","html","meta","vue"],"latest_commit_sha":null,"homepage":"https://vinicius73.github.io/vue-page-title/","language":"Vue","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/vinicius73.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":"2018-06-23T19:07:51.000Z","updated_at":"2024-02-17T07:39:06.000Z","dependencies_parsed_at":"2024-06-18T23:00:22.594Z","dependency_job_id":"f59f12b0-60c2-4627-8183-edfa12d5161e","html_url":"https://github.com/vinicius73/vue-page-title","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicius73%2Fvue-page-title","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicius73%2Fvue-page-title/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicius73%2Fvue-page-title/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicius73%2Fvue-page-title/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinicius73","download_url":"https://codeload.github.com/vinicius73/vue-page-title/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208183,"owners_count":20901570,"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":["document","head","html","meta","vue"],"created_at":"2024-08-03T17:01:20.295Z","updated_at":"2025-04-04T16:16:43.720Z","avatar_url":"https://github.com/vinicius73.png","language":"Vue","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Vue Page Title\n\n![Vue.js html/page title manager](cover.jpg)\n\n[![Maintainability](https://api.codeclimate.com/v1/badges/ac0ebf285e98487cce0c/maintainability)](https://codeclimate.com/github/vinicius73/vue-page-title/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/ac0ebf285e98487cce0c/test_coverage)](https://codeclimate.com/github/vinicius73/vue-page-title/test_coverage) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/vinicius73/vue-page-title/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/vinicius73/vue-page-title/?branch=master) [![Build Status](https://scrutinizer-ci.com/g/vinicius73/vue-page-title/badges/build.png?b=master)](https://scrutinizer-ci.com/g/vinicius73/vue-page-title/build-status/master)\n\n[![Known Vulnerabilities](https://snyk.io/test/github/vinicius73/vue-page-title/badge.svg?targetFile=package.json)](https://snyk.io/test/github/vinicius73/vue-page-title?targetFile=package.json) [![Known Vulnerabilities](https://badgen.net/bundlephobia/minzip/vue-page-title)](https://bundlephobia.com/result?p=vue-page-title) [![Tests](https://github.com/vinicius73/vue-page-title/actions/workflows/tests.yml/badge.svg?branch=master)](https://github.com/vinicius73/vue-page-title/actions/workflows/tests.yml)\n\n[![Example App](https://img.shields.io/website?down_message=Off\u0026label=Example%20App\u0026up_message=On\u0026url=https%3A%2F%2Fvinicius73.github.io%2Fvue-page-title%2Findex.html)](https://vinicius73.github.io/vue-page-title/index.html) [![Doctype](https://img.shields.io/website?down_message=Off\u0026label=Doctype\u0026up_message=On\u0026url=https%3A%2F%2Fvinicius73.github.io%2Fvue-page-title%2Ftypes%2Findex.html)](https://vinicius73.github.io/vue-page-title/types/index.html)\n\n## Install [![npm version](https://badge.fury.io/js/vue-page-title.svg)](https://badge.fury.io/js/vue-page-title)\n\n```shell\nyarn add vue-page-title # npm i vue-page-title\n```\n\n## Setup\n\n```js\nimport { createApp } from 'vue';\nimport { pageTitle } from 'vue-page-title';\n\nconst app = createApp(Root);\n\napp.use(\n  pageTitle({\n    suffix: '- Vue Page Title',\n    mixin: true,\n  })\n);\n```\n\n#### Examples\n\n- [mixin 01](https://jsfiddle.net/vinicius73/3b5nrkdu/)\n- [mixin 02](https://jsfiddle.net/vinicius73/3tqknpLf/)\n- [composition](https://jsfiddle.net/vinicius73/3fnpq2hL/)\n\n### Compatibility\n\n| Vue | Version                                                       |\n| --- | ------------------------------------------------------------- |\n| v2  | [v1.\\*](https://github.com/vinicius73/vue-page-title/tree/v1) |\n| v3  | [v2.\\*](https://github.com/vinicius73/vue-page-title/)        |\n\n#### Migration from v1\n\nAll resources from `v1` works on `v2`.\n\nNow mixin is optional and must be defined as true to be automatically registered in the app.\n\n### Options\n\n| Name           | Type                                                                           | Description                                                                                          |\n| -------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |\n| suffix         | `String`                                                                       | suffix for the value of the page title tag                                                           |\n| prefix         | `String`                                                                       | prefix for the value of the page title tag                                                           |\n| separator      | `String`                                                                       | a string that comes between the prefix and the title / the title and the suffix, defaults to a space |\n| mixin          | `Boolean`                                                                      | if true, enable plugin mixin in the components                                                       |\n| router         | [VueRouter instance](https://router.vuejs.org/api/#router-instance-properties) | if present, allows you to set the title via the route.                                               |\n| setTitleMethod | `Function`                                                                     | custom method of setting title                                                                       |\n\n## Usage\n\n### Composition API\n\n```vue\n\u003cscript\u003e\nimport { createApp, h, ref, computed, onBeforeUnmount } from 'vue';\nimport { useTitle } from 'vue-page-title';\n\nconst CAPTAINS = [\n  'Monkey D. Luffy',\n  'Trafalgar D. Water Law',\n  'Eustass Kid',\n  'Shanks',\n  'Edward Newgate',\n  'Charlotte Linlin',\n  'Capone Bege',\n  'Gol D. Roger',\n];\n\nconst getCapitain = () =\u003e CAPTAINS[Math.floor(Math.random() * CAPTAINS.length)];\n\nexport default defineComponent({\n  setup() {\n    const current = ref('Capitains');\n    const { title } = useTitle(current);\n\n    const refresh = () =\u003e {\n      current.value = getCapitain();\n    };\n\n    const interval = setInterval(refresh, 5000);\n\n    onBeforeUnmount(() =\u003e {\n      clearInterval(interval);\n    });\n\n    return {\n      title,\n    };\n  },\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003ch1\u003e{{ title }}\u003c/h1\u003e\n\u003c/template\u003e\n```\n\n```ts\nconst { title } = useTitle('initial title`)\n```\n\n#### React from ref state\n\n```ts\nconst name = ref('initial name');\nconst { title } = useTitle(name);\n```\n\n#### Use like a watch source argument\n\n```ts\nconst product = ref({ name: 'One Piece 1017' });\nconst { title } = useTitle(() =\u003e product.name);\n```\n\n#### Pass a computed as argument\n\n```ts\nconst product = ref({ name: 'One Piece 1017' });\nconst name = computed(() =\u003e product.name);\nconst { title } = useTitle(name);\n```\n\n#### Use `setTitle` to dynamically change the title\n\n```ts\nconst product = ref({ name: 'One Piece 1017' });\nconst { setTitle } = useTitle();\n\nwatchEffect(() =\u003e {\n  setTitle(product.name);\n});\n```\n\n### Mixin\n\nWith the mixin option enabled, just set the `title` option inside the component.  \nWithin the component it is still possible to update the `$title` state using `$setPageTitle` function, it is also available to be used within the component template.\n\n\u003e The option `mixin` must be `true`.\n\n```vue\n\u003cscript\u003e\nconst CREW = [\n  'Monkey D. Luffy',\n  'Roronoa Zoro',\n  'Nami',\n  'Usopp',\n  'Sanji',\n  'Tony Tony Chopper',\n  'Nico Robin',\n  'Franky',\n  'Brook',\n  'Jinbe',\n  'Nefertari Vivi',\n];\n\nexport default {\n  title: 'Mugiwara no Ichimi',\n  mounted() {\n    this.$interval = setInterval(() =\u003e {\n      this.$setPageTitle(CREW[Math.floor(Math.random() * CREW.length)]);\n    }, 2000);\n  },\n  beforeDestroy() {\n    clearInterval(this.$interval);\n  },\n};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003ch1\u003e{{ $title }}\u003c/h1\u003e\n\u003c/template\u003e\n```\n\n#### Function title\n\nYou are able to turn the title changes acative, like a computed.\n\n```vue\n\u003cscript\u003e\nconst EMPERORS = ['Shanks', 'Marshall D. Teach', 'Monkey D. Luffy', 'Buggy'];\n\nexport default {\n  title() {\n    return `🏴‍☠️ ${this.emperor}`;\n  },\n  data() {\n    return {\n      emperor: 'Four Emperors',\n    };\n  },\n  mounted() {\n    this.$interval = setInterval(() =\u003e {\n      this.emperor = EMPERORS[Math.floor(Math.random() * EMPERORS.length)];\n    }, 2000);\n  },\n  beforeDestroy() {\n    clearInterval(this.$interval);\n  },\n};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003ch1\u003e{{ $title }}\u003c/h1\u003e\n\u003c/template\u003e\n```\n\nThis is particularly useful for internationalization.  \nThis is an example using [vue-i18n@9](https://github.com/intlify/vue-i18n-next).\n\n```js\nexport default {\n  title: ({ $t }) =\u003e $t('pages.clients.title'),\n};\n```\n\n## Vue Router integration\n\n### Setup\n\n```js\nimport { createApp } from 'vue';\nimport { pageTitle } from 'vue-page-title';\nimport router from 'path/to/application/router';\n\nconst app = createApp(Root);\n\napp.use(pageTitle({ router }));\n```\n\n\u003e path/to/application/router\n\n```js\nimport { createRouter, createWebHashHistory } from 'vue-router';\nimport FooComponent from 'path/to/foo-component';\nimport HomeComponent from 'path/to/home-component';\n\nconst routes = [\n  {\n    path: '/',\n    component: HomeComponent,\n    meta: {\n      title: 'Home Page', // Title must be a string.\n    },\n  },\n  {\n    path: '/foo',\n    component: FooComponent,\n    meta: {\n      title: 'Foo Page',\n    },\n  },\n];\n\nexport default createRouter({\n  history: createWebHashHistory(),\n  routes,\n});\n```\n\n### Watching routes\n\n```js\nexport default {\n  title() {\n    return `My title is: ${this.$route.query.foo}`;\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinicius73%2Fvue-page-title","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinicius73%2Fvue-page-title","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinicius73%2Fvue-page-title/lists"}