Dynamically binding title tag in vuejs

Question

I'm new to vuejs.

I try to bind data on the title tag dynamically. I used vue-head to do this on a simple html page. I do not use webpack and npm.

This is how I bind the title tag :

var app = new Vue({
            el: 'html',
            head: {
              title: function () {
                return {
                    inner: this.remaining + ' Tâches',
                    separator: ' ',
                    complement: ' '   
                }
              }
            }

In the vue-head documentation, they suggest to do this :

methods: {
  getAsyncData: function () {
    var self = this
    window.setTimeout(function () {
    self.title = 'My async title'
    self.$emit('updateHead')
    }, 3000)
  }
},

I also tried to set it in the watch prop, but it didn't work.

Here is my entire code : https://jsfiddle.net/5d70s0s6/1/

Thanks

It's working for me. I can see the `title` tag being set in your fiddle. — abhishekkannojia, Jul 21 '17 at 08:52
Yep, it works but if I change a task, I want the title to update dynamically. Like the {{ remaining }} in the fiddle. Now, I have to reload the page to change the title tag. — SahnaS, Jul 21 '17 at 08:54
Possible duplicate of https://stackoverflow.com/questions/36612847/how-can-i-bind-the-html-title-content-in-vuejs — abhishekkannojia, Jul 21 '17 at 08:57
I already saw that question, but the solutions doesn't work for me. Thanks — SahnaS, Jul 21 '17 at 09:00
Possible duplicate of [How can I bind the html content in vuejs?](https://stackoverflow.com/questions/36612847/how-can-i-bind-the-html-title-content-in-vuejs) — str, Dec 14 '17 at 13:27

Ikbel · Accepted Answer · 2017-07-22T04:56:52.387

4

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
  }
}

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

Example:

<vue-title>{{title}}</vue-title>

edited Jul 22 '17 at 04:56

answered Jul 21 '17 at 09:01

Ikbel

7,721
3
34
45

I tried your solution, but it did not work for me. How can I bind it to the title tag? By using {{ title }} ? – SahnaS Jul 21 '17 at 09:11
It should work if your Vue instance is bound to `html` element. If you're testing it in a jsfiddle it won't work because it's inside an iframe. – Ikbel Jul 21 '17 at 09:23
I try it in my localhost using sublimText and sublimServer and it's not works. Maybe I didn't do it well, I'm a totally beginner with Vuejs. Thanks – SahnaS Jul 21 '17 at 09:28
Have I to change this : app.$mount('.todoapp') to this : app.$mount('html') ? Because if I do this, it will breaks all the app. – SahnaS Jul 21 '17 at 09:38
Your solution works perfectly, but if I include this in the rest of my code, it do not works. Maybe there is something in my code who "breaks" your solution. I can't find why. – SahnaS Jul 21 '17 at 10:07
When I add your solution, my code works exactly like my old one. I have to reload the page to update the title tag. This is my js part : https://pastebin.com/TQMnm2MU And I added the v-model="title" in my title. EDIT : I notice that your solution is binding to an input, but my code isn't an input, but a function result. Thanks – SahnaS Jul 21 '17 at 10:15
It don't works. The title is empty with your updated solution. – SahnaS Jul 21 '17 at 11:45
I simplified the solution, try again – Ikbel Jul 22 '17 at 01:13
Thanks ! It's ok with your solution + bind Vuejs to the HTML tag. – SahnaS Jul 24 '17 at 08:31

Dynamically binding title tag in vuejs

1 Answers1