VueJS and dynamic titles

Question

Trying to use vue-meta

I can't understand how to set title based on XHR response. So far I have:

<script>
    export default {
        name: 'Model',
        data() {
            return {
                model: [],
            }
        },
        metaInfo: {
            title: 'Default Title',
            titleTemplate: '%s - site slogan'
        },
        methods: {
            getModels() {
                window.axios.get(`/api/${this.$route.params.manufacturer}/${this.$route.params.model}`).then((response) => {
                    this.model = response.data;
                    this.metaInfo.title = response.data.model_name; // THIS NOT WORKING
                });
            }
        },
        watch: {
            $route(to, from) {
                if ( to.name === 'model' ) {
                    this.getModels();
                }
            },
        },
        created() {
            this.getModels();
        }
    }
</script>

when I try to set

this.metaInfo.title = response.data.model_name;

Getting error: Uncaught (in promise) TypeError: Cannot set property 'title' of undefined

So this.metaInfo is undefined...

I need my title be based on response from XHR request.

Answer 1

You need to use the function form of metaInfo and have it get updates from reactive data

<script>
export default {
    data() {
        return {
            title: "Default Title",
            // ...
        };
    },
    metaInfo() {
        return {
            title: this.title,
            // ...
        };
    },
    methods: {
        getModels() {
            window.axios.get("url...").then((response) => {
                this.title = response.data.model_name;
            });
        }
    },
    //  ...

Answer 2

Here is my solution:

I have a root component in my SPA app: App.vue with this code in it:

export default {
    /**
     * Sets page meta info, such as default and page-specific page titles.
     */
    metaInfo() {
        return {
            titleTemplate(titleChunk) {
                const suffix = "Marvin Rodank's dank site";
                return titleChunk ? `${titleChunk} - ${suffix}` : suffix;
            },
        };
    },

};

That sets up my default page title for all pages, and then after that, the answer by Stephen Thomas contains the key logic.

For all pages with static page titles, it's easy:

metaInfo() {
    return { title: 'List examples' };
},

But dynamic page titles were more difficult, but still easy once you realize the page loads in two phases:

• phase 1: browser displays the default page title

• phase 2: page title is updated with the dynamic title

  metaInfo() {
      return {
          title: this.example.name,
      };
  },
  

In the dynamic title example there, my child component fetches the object this.example from an API endpoint, so it is important to note that this.$metaInfo().title updates itself when this.example is populated.

You could test it with code such as this:

  metaInfo() {
      return {
          title: this.example.name,
      };
  },

  mounted() {
      const obj = {
          name: 'Sally',
          age: 1337,
      };

      this.example = obj;
  },