How to Bind the HTML <Title> Content in Vuejs

How can I bind the html title content in vuejs?

There are essentially two ways to solve it.

Use an existing Package

For example, vue-meta:

<div id="app">

export default {
name: 'App',
metaInfo: {
// if no subcomponents specify a metaInfo.title, this title will be used
title: 'Default Title',
// all titles will be injected into this template
titleTemplate: '%s | My Awesome Webapp'

Create your own Component

Create a vue file containing:

export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
render () {

Register the component using

import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);

Then you can use it in your templates, e.g.

<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>

Dynamically binding title tag in vuejs

Use a computed property.

computed: {
title: {
get() {
document.title = this.remaining
return this.remaining
set(val) {
document.title = val

You don't need to use <title>{{title}}</title>. If you change title in your Vue, it will be applied automatically to the page.

Also, you should not bind a Vue instance to html, head or body tags. Use regular elements only like <div id="app"></div> and set your Vue el: '#app'

Or you could use this:

data: {
title: '',
watch: {
title(val) {
document.title = val

While the code above can solve your problem. I created this tiny vue-title component that can be used in your project easily.



How to bind v-for values to HTML attributes in Vue

your title binding should have double quotes before and after the expression, and it seems that you want a string interpolation in title, but I don't think it will work.

try this (you can ommit v-bind cus : its a shorthand for it)

<label v-for="hashtag in hashtags"  :title="'You can filter with ' + hashtag" :data-value="hashtag">
{{ hashtag }}

VueJs, Template, v-bind, embeded html

I was running a test, and came back to see the added comment about removing the <template> tag, which I agree with.

However, you also have a problem in that you are trying to bind myName to a <div> tag name attribute, which doesn't exist. Use handle bars instead.

Here is the working code:

<!DOCTYPE html>
<html lang="en">

<title>Template and v-bind</title>

<!-- Div to Mount App -->
<div id="app"></div>

<!-- Reference to Vue.js library -->
<script src=""></script>

<!-- Script Element for our App -->
var app = new Vue({
el: '#app',
data: {
myName: 'Cool Name'
template: `
<div>{{ myName }}</div>




How to change page titles when using vue-router?

You can use a navigation guard with the router definition:

import Vue from 'vue';

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
// Use next tick to handle router history correctly
// see:
Vue.nextTick(() => {
document.title = to.meta.title || DEFAULT_TITLE;

You'll need to change your export to:

const router = new Router({ ... });
export default router;

Or you can use an immediate watcher on your root component:

export default {
name: 'App',
watch: {
$route: {
immediate: true,
handler(to, from) {
document.title = to.meta.title || 'Some Default Title';

Unable to bind text to href attribute in VueJS template

In attributes you have to indicate props or JS-expressions directly without mustaches:

<a :href="url">{{ post.title }}</a>

How can I pass in rendered HTML to a vue property?

You could pass a dynamically generated HTML. If it is just a simple case, you could even do it inline with a template string:

md-title="Make an Outboud Call"
:md-content="`some text with the value <b>${yourVariable}</b> here`"

Note the : in front of md-content which is the shorthand for v-bind.

Related Topics

Leave a reply