Nuxt 3 Fundamentals

Page Metadata & Resources Exercise

Ben Hong

Ben Hong

Nuxt 3 Fundamentals

Check out a free preview of the full Nuxt 3 Fundamentals course

The "Page Metadata & Resources Exercise" Lesson is part of the full, Nuxt 3 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to import a custom font from Google Fonts using the Nuxt metadata components. To begin this exercise, check out the 09-exercise branch. The solution can be found on the 09-finish branch.


Transcript from the "Page Metadata & Resources Exercise" Lesson

>> So for this exercise, what I would be asking you to do, is to go ahead and go to Google Fonts, grab a couple of fonts and then go ahead and import them onto your page and just load them up on their styles. So for the solution, so what I asked you to do is go into and just grab any font that you like.

So it looks like, let's see, Qwitcher Grypen. That looks interesting, let's grab that. So we can go ahead and here we go. We have a link here that we can grab. So let's grab that and all we gotta do now is we're still inside of our homepage. So I can drop this in here instead cuz that was a fake link, and just uppercase all of these things.

And we do need to actually close these components though since we are inside of the single file component. And once we have that, we can do and we can check. So we can go inside of our homepage, and what you'll see now is that if you look inside of the head, here we go fonts.googleapis, go static.

It builds exactly as you would hope to without the need to like write a bunch of JavaScript to try to make that thing work. It really just felt more like a copy and paste. And that's as easy as it gets when it comes to not only configuring resources for your pages, but also if you wanna add metadata.

Cuz that's a big part, right? We're talking about SEO and that kind of stuff, right? People wanna be able to see, get their search results index and so being able to dynamically configure meta tags with certain descriptions that kinda thing that's a big deal. And so with this new way of configuration, it makes it a lot easier for people to configure all these different properties for their pages as they go.

As you can imagine for like the photos and to do things that we had, you could easily just be like there's my page title, there's a description, there's a site, you could do a bunch of stuff with it to actually inform people about your page

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now