How to Set Page Titles and Styles in Nuxt | Full-Stack Web Dev #4
2This is Episode #4 of my Nuxt Full-Stack Web Development series.
In this video, I’ll show you how to use the useHead() composable in Nuxt to set custom page titles and metadata. We’ll also add a global stylesheet so we can start customizing the look and feel of our project. These are essential first steps for giving your site proper structure and style.
What’s covered in this video:
Using useHead() to set page titles
Adding metadata with useHead()
Linking a global stylesheet in Nuxt
Starting to customize the look of your project
Subscribe to follow along with the full series as we continue building this project step by step.
00:00 Intro & Recap of Dynamic Routes
00:14 What is Page Metadata? (Head Tags)
00:39 Setting Up Script with TypeScript
00:46 Checking the Default Tab Title
00:55 Using useHead() in Nuxt
01:02 Adding a Custom Page Title
01:11 Adding Meta Tags with useHead()
01:25 Overview of Additional Options (meta, styles, scripts)
01:32 Creating an Assets Folder for CSS
01:39 Adding main.css Stylesheet
01:51 Updating nuxt.config.ts to Include CSS
02:13 Using the ~assets Path Shortcut
02:24 Testing CSS Changes (Background Color & Text Color)
02:40 Wrap-Up: useHead() + Stylesheet Integration