vinicius73 / Vue Page Title
Licence: mit
Vue.js html/page title manager
Stars: ✭ 115
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Page Title
Hexo Theme Doku
📜 Doku, a Hexo theme designed for writing documents.
Stars: ✭ 101 (-12.17%)
Mutual labels: document
Metaforge
An OSINT Metadata analyzing tool that filters through tags and creates reports
Stars: ✭ 63 (-45.22%)
Mutual labels: meta
Showdoc
ShowDoc is a tool greatly applicable for an IT team to share documents online一个非常适合IT团队的在线API文档、技术文档工具
Stars: ✭ 10,099 (+8681.74%)
Mutual labels: document
React Native Doc Viewer
React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,csv,docx,png,jpg,pdf,xml,binary ...)
Stars: ✭ 58 (-49.57%)
Mutual labels: document
Meta Debian
Meta-layer for Poky to build embedded Linux exvironments by Debian's source codes
Stars: ✭ 102 (-11.3%)
Mutual labels: meta
Magento 2 Seo
Magento 2 SEO extension will do perfectly for your better SEO. This is a bundle of outstanding features that are auto-active when you install it from Mageplaza without any code modifications. It is also friendly with your store if you need to insert meta keywords and meta descriptions for your product.
Stars: ✭ 99 (-13.91%)
Mutual labels: meta
Scanbot Sdk Example Android
Document scanning SDK example apps for the Scanbot SDK for Android.
Stars: ✭ 67 (-41.74%)
Mutual labels: document
Vse Formatdocumentonsave
Visual Studio - Format Document on Save
Stars: ✭ 61 (-46.96%)
Mutual labels: document
Meta
tool for turning many repos into a meta repo. why choose many repos or a monolithic repo, when you can have both with a meta repo?
Stars: ✭ 1,376 (+1096.52%)
Mutual labels: meta
Pandiff
Prose diffs for any document format supported by Pandoc
Stars: ✭ 110 (-4.35%)
Mutual labels: document
Ama
[[I'm slow at replying these days, but I hope to get back to answering questions eventually]] Ask me anything!
Stars: ✭ 102 (-11.3%)
Mutual labels: meta
Vue Page Title
Install
yarn add vue-page-title # npm i vue-page-title
Setup
import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
Vue.use(VuePageTitle, {
// prefix: 'My App - ',
suffix: '- My App '
})
Options
Name | Type | Description |
---|---|---|
suffix | String | suffix for the value of the page title tag |
prefix | String | prefix for the value of the page title tag |
router | VueRouter instance | if present, allows you to set the title via the route. |
setTitleMethod | Function | custom method of setting title |
Usage
Just set the title
option inside the component.
Within the component it is still possible to update the $title
state, it is also available to be used within the component template.
<script>
export default {
title: 'Page title',
mounted () {
const servantTypes = [
'Ruler', 'Saber', 'Archer', 'Lancer', 'Rider', 'Caster', 'Berserker', 'Assassin'
]
this.$interval = setInterval(() => {
this.$title = servantTypes[Math.floor(Math.random() * servantTypes.length)]
}, 2000)
},
beforeDestroy () {
clearInterval(this.$interval)
}
}
</script>
<template>
<div>{{ $title }}</div>
</template>
It is also possible to generate a title dynamically, using a function. It receives as an argument the component instance.
export default {
title: (context) => `Client: ${context.client.name}`,
data () {
return {
client: {
name: 'Type-Moon.'
}
}
}
}
This is particularly useful for internationalization.
This is an example using vue-i18n.
export default {
title: ({ $t }) => $t('pages.clients.title')
}
Vue Router usage
Setup
import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
import router from 'path/to/application/router'
Vue.use(VuePageTitle, { router })
// path/to/application/router
import FooComponent from 'path/to/foo-component'
import HomeComponent from 'path/to/home-component'
const routes = [{
path: '/',
component: HomeComponent,
meta: {
title: 'Home Page' // Title must be a string.
}
}, {
path: '/foo',
component: FooComponent,
meta: {
title: 'Foo Page'
}
}]
export default new VueRouter({
routes
})
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].