Modified1 year, 6 months ago.
Trying to use vue-meta. I can't understand how to set title based on XHR response. So far I have: . when I try to set . 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. 77 gold badges3131 silver badges5555 bronze badges. 5555 bronze badges. You need to use the function form of metaInfo and have it get updates from reactive data.
- 22 gold badges2727 silver badges4747 bronze badges.
- 4747 bronze badges.
- I assume you call this.metaInfo.title = response.data.model_name; inside a method on the vue instance.
- The problem I see is that you should put the metaInfo object inside the return object from data().
- 11 gold badge66 silver badges1818 bronze badges.
- 1818 bronze badges. Here is my solution:.
I have a root component in my SPA app: App.vue with this code in it:.
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:.
- 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.
- 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:.
55 gold badges6565 silver badges9393 bronze badges. 9393 bronze badges. For any traditional website we build, we have to display a different page title for each different page we have.
This can be simply done by changing the content of the
But for Single-Page Applications, things are a little bit different. When the router changes to a different page component, the title should be changed programmatically using document.title = 'new title'.
2. Create a Vue object
Since this is going to be done for every page, let’s create a clean, reusable solution using Vue mixins. In your mixins directory create a new file called titleMixin.js and put this into it:.
First, we have to install the mixin globally.
You can do that in your main.js, like this:.
Now you can use it in your component pages like this:. Or you can access the values of your Vue instance by using a function instead of a string.
3. Link the HTML template to the Vue object
Note: credit goes to Evan You for his title mixin solution from the vue-hackernews-2.0 repo. In this tutorial, we are going to learn about how to set a document
Run the following command to install the package.
To configure the package add the following (highlighted) lines to your main.js file.
4. Create a data property
Now, inside our vue components, we can set a title to the page using the metaInfo property. Here is an example that sets the title to the About page. It will render an HTML
vue-router is an excellent routing solution for Vue.js, but requires additional configuration to update the page title and metadata on route change.
5. Create a method in Vue object
There will be times where you will want the title of the browser to change when the page changes. And for SEO (search engine optimization), you will not want every search result or link to your website to say “Home Page” for all routes.
In this article, you’ll learn how to add this feature yourself.
You will build an example Vue application with customizable page title and metadata on route change.
To complete this tutorial, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment. This tutorial was verified with Node v14.6.0, npm v6.14.7, Vue.js v2.6.11, vue-router v3.2.0, and @vue/cli v4.4.6.
6. Change the data when clicking a button
Let’s create a fresh Vue project. First, open your terminal and use vue-cli create a Vue project:.
This long command is a set of presets based on defaults established by @vue/cli/packages/@vue/cli/lib/options.js.
When reformatted for readability, it looks look like this:. These presets add vue-router as a plugin (cli-plugin-router), enable history mode, add Babel, and add ESLint.
For the needs of this tutorial, you will not require TypesScript, Progressive Web App (PWA) support, Vuex, CSS pre-processors, unit testing, or end-to-end (E2E) testing.
Next, navigate to the new project directory:.
At this point, we have a fresh Vue Project to build upon.
The next step will be defining sample routes in the application.
Once we have established the structure of our application, we will be able to see title and meta changes in action.
In our example, our goal will be to construct an application consisting of:.
a home route (/). an adjacent About route (/about). and a nested Frequently Asked Questions route (/about/frequently-asked-questions).
Now, open main.js:. Take a moment to familiarize yourself with how VueRouter has been added by cli-plugin-router:.