How can I bind the html <title> content in vuejs?

There are essentially two ways to solve it.

Use an existing Package

<template>  <div id="app">    <router-view></router-view>  </div></template><script>  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'    }  }</script>

Create your own Component

Create a vue file containing:

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

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>

javascript html mvvm frontend vue.js

You can do it with 1 line in the App.vue file, like this:

<script>    export default {        name: 'app',        created () {            document.title = "Look Ma!";        }    }</script>

Or change the <title> tag content in public/index.html

<!DOCTYPE html><html>  <head>    <title>Look Ma!</title> <!- ------ Here ->  </head>...

javascript html mvvm frontend vue.js

This answer is for vue 1.x

using requirejs.

define([  'https://cdn.jsdelivr.net/vue/latest/vue.js'], function(Vue) {  var vm = new Vue({    el: 'html',    data: {      hello: 'Hello world'    }  });});

<!DOCTYPE html><html id="html"><head>  <title>{{ hello }}</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="app"></script></head><body>  {{ hello }}  <input v-model="hello" title="hello" /></body></html>

Expand snippet