Coding Challenge: Set Dynamic Page Titles

Problem statement

In this challenge, create a Nuxt project to set dynamic page titles. Each page title should have a structure similar to “Contact Us - My Awesome Site.” The text of “Contact Us” should be replaced with the current page name using the %s placeholder. The text of “My Awesome Site” should be set from a public environment variable.

The project below has three pages, each with a static page title already set. We should override these titles by setting the titleTemplate in the app.vue.

Complete the project by completing the following steps:

1. In nuxt.config.ts, add a site name to the siteTitle variable.

2. In the app.vue:

   1. Store the site title from the nuxt.config.ts file into a variable.

   2. Add the titleTemplate inside useHead.

   3. Set the titleTemplate value to include both the current page and the dynamic site title.

Try it yourself

You can implement your solution in the code widget provided below. The browser tab should be updated with the dynamic page titles.

If you’re unsure how to do this, click the “Show Hint” button.