• Stars
    star
    128
  • Rank 281,044 (Top 6 %)
  • Language Vue
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vue.js html/page title manager

Vue Page Title

Vue.js html/page title manager

Maintainability Test Coverage Scrutinizer Code Quality Build Status

Known Vulnerabilities Known Vulnerabilities Tests

Example App Doctype

Install npm version

yarn add vue-page-title # npm i vue-page-title

Setup

import { createApp } from 'vue';
import { pageTitle } from 'vue-page-title';

const app = createApp(Root);

app.use(
  pageTitle({
    suffix: '- Vue Page Title',
    mixin: true,
  })
);

Examples

Compatibility

Vue Version
v2 v1.*
v3 v2.*

Migration from v1

All resources from v1 works on v2.

Now mixin is optional and must be defined as true to be automatically registered in the 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
separator String a string that comes between the prefix and the title / the title and the suffix, defaults to a space
mixin Boolean if true, enable plugin mixin in the components
router VueRouter instance if present, allows you to set the title via the route.
setTitleMethod Function custom method of setting title

Usage

Composition API

<script>
import { createApp, h, ref, computed, onBeforeUnmount } from 'vue';
import { useTitle } from 'vue-page-title';

const CAPTAINS = [
  'Monkey D. Luffy',
  'Trafalgar D. Water Law',
  'Eustass Kid',
  'Shanks',
  'Edward Newgate',
  'Charlotte Linlin',
  'Capone Bege',
  'Gol D. Roger',
];

const getCapitain = () => CAPTAINS[Math.floor(Math.random() * CAPTAINS.length)];

export default defineComponent({
  setup() {
    const current = ref('Capitains');
    const { title } = useTitle(current);

    const refresh = () => {
      current.value = getCapitain();
    };

    const interval = setInterval(refresh, 5000);

    onBeforeUnmount(() => {
      clearInterval(interval);
    });

    return {
      title,
    };
  },
});
</script>

<template>
  <h1>{{ title }}</h1>
</template>
const { title } = useTitle('initial title`)

React from ref state

const name = ref('initial name');
const { title } = useTitle(name);

Use like a watch source argument

const product = ref({ name: 'One Piece 1017' });
const { title } = useTitle(() => product.name);

Pass a computed as argument

const product = ref({ name: 'One Piece 1017' });
const name = computed(() => product.name);
const { title } = useTitle(name);

Use setTitle to dynamically change the title

const product = ref({ name: 'One Piece 1017' });
const { setTitle } = useTitle();

watchEffect(() => {
  setTitle(product.name);
});

Mixin

With the mixin option enabled, just set the title option inside the component.
Within 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.

The option mixin must be true.

<script>
const CREW = [
  'Monkey D. Luffy',
  'Roronoa Zoro',
  'Nami',
  'Usopp',
  'Sanji',
  'Tony Tony Chopper',
  'Nico Robin',
  'Franky',
  'Brook',
  'Jinbe',
  'Nefertari Vivi',
];

export default {
  title: 'Mugiwara no Ichimi',
  mounted() {
    this.$interval = setInterval(() => {
      this.$setPageTitle(CREW[Math.floor(Math.random() * CREW.length)]);
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.$interval);
  },
};
</script>

<template>
  <h1>{{ $title }}</h1>
</template>

Function title

You are able to turn the title changes acative, like a computed.

<script>
const EMPERORS = ['Shanks', 'Marshall D. Teach', 'Monkey D. Luffy', 'Buggy'];

export default {
  title() {
    return `🏴‍☠️ ${this.emperor}`;
  },
  data() {
    return {
      emperor: 'Four Emperors',
    };
  },
  mounted() {
    this.$interval = setInterval(() => {
      this.emperor = EMPERORS[Math.floor(Math.random() * EMPERORS.length)];
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.$interval);
  },
};
</script>

<template>
  <h1>{{ $title }}</h1>
</template>

This is particularly useful for internationalization.
This is an example using vue-i18n@9.

export default {
  title: ({ $t }) => $t('pages.clients.title'),
};

Vue Router integration

Setup

import { createApp } from 'vue';
import { pageTitle } from 'vue-page-title';
import router from 'path/to/application/router';

const app = createApp(Root);

app.use(pageTitle({ router }));

path/to/application/router

import { createRouter, createWebHashHistory } from 'vue-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 createRouter({
  history: createWebHashHistory(),
  routes,
});

Watching routes

export default {
  title() {
    return `My title is: ${this.$route.query.foo}`;
  },
};

More Repositories

1

awesome-brasil

Uma lista de projetos Open Source Brasileiros!
208
star
2

gravatar-url-generator

A fun and friendly generator of Gravatar urls.
Vue
51
star
3

vue-pokemon-memory-game

Pokémon Memory Game
Vue
48
star
4

graphql-start-project

A project with opinionated architecture that is used as the basis for new projects.
JavaScript
40
star
5

Laravel-InstantAvatar

Create a very pretty random avatars with ease.
PHP
30
star
6

Lavatar

Have easy access to various services of avatar, like the Gravatar. Package for Laravel.
PHP
26
star
7

SeoTools

Ferramentas de SEO para Laravel
PHP
25
star
8

rollup-plugin-pika-resolver

Generate the bundle of your project using Pika CDN for external dependencies.
JavaScript
19
star
9

vue-wifi-qrcode-generator

Share your Wi-Fi Network with your guests!
Vue
17
star
10

laravel-model-shield

A validator for simple models of Laravel
PHP
12
star
11

dotfiles

Shell
10
star
12

gear-feed

Bot and Scrapper system
Go
10
star
13

jsonlogic-playground

A simple JsonLogic tester
Vue
9
star
14

pokemon-match

Vue
9
star
15

quasar-utils

A collection of helpers to facilitate access to some quasar features
JavaScript
9
star
16

quasar-and-vitest

Vue 3 + Typescript + Vite + Quasar + Vitest
TypeScript
7
star
17

vue-pokedex-gdg

Projeto de demonstração do Vue.js para o GDG - Duque de Caxias
Vue
6
star
18

thecollector

A tool to make and schedule postgres backups
Go
5
star
19

guia-de-estudos

Um índice de assuntos para quem quer esta começando
Shell
5
star
20

whos-that-pokemon

A simple game for test your knowledge
JavaScript
4
star
21

vuepress-plugin-merge-pages

VuePress Plugin: Merge markdown files in a single markdown
JavaScript
4
star
22

bootstrap-vue-cep-form

Vue
4
star
23

vue-starter-gulp

Vue Starter [GULP]
JavaScript
3
star
24

activemq-artemis-docker

Automates the docker build generation of ActiveMQ Artemis.
Shell
2
star
25

serverless-golang-hello-world

Go
2
star
26

poc-route-autoload

JavaScript
2
star
27

multiplication-table-the-game

Vue
2
star
28

Bcrypt-Plus

Classe para trabalhos com senhas em crypt () do php. Modificada apartir da classe do @TiuTalk Thiago Belem https://gist.github.com/3438461
PHP
2
star
29

codecasts-laravel-vue

Codecasts Laravel Base With Vue.js
PHP
1
star
30

base-front-bootstrap

Base de projeto front-end com bootstrap
CSS
1
star
31

vite-plugin-nextcloud

TypeScript
1
star
32

php-rio

CSS
1
star
33

palestra-apis

HTML
1
star
34

vinicius73-from-dev

CSS
1
star