Hello again, welcome to the first lesson in this chapter. Since you made it this far in the course, you're now ready to use Nox's official toolkit to manipulate and inject assets into the application runtime. In this module over here, we are injecting the required links to load a font from Google Fonts into the application's head. dudu file in the Playground directory.
So if I now use this module from any other Nox project, it wouldn't work because the CSS is only inside my Playground directory. So what if we could inject this CSS directly from our module into the application's runtime? Let me show you how. Remember the runtime directory we mentioned earlier?
It's like the hub for all things runtime related. Any assets you add in there, it becomes ready to be injected to the application's runtime. view. Okay, back to our module entry now.
And just like the app property which we are using to inject the link tags, Noxt also has CSS property that allows us to add as many global CSS as we want. css asset. But we can't just pass a relative path like this. For this to work properly, we need to push a resolved path to the asset that is relative to the Majol base path.
And this is when we finally introduce you to NoxKit. And this beautiful thing is an official Nox package that contains a collection of utilities, which helps developers work with Nox more efficiently. It provides functionalities for working with Majols, interacting with Nox, interacting with Nitro, and more. But here's the deal.
This toolkit only works when you're setting things up with modules. Once your application is up and running, it doesn't get involved with components, view things, pages, plugins, or even server routes. And we are already using it to build our module as we import define next module from it. But it has so many other useful utilities that will make our lives easier.
And the one we're looking for to resolve relative paths is inside the resolving section and it's called create resolver. Looking at the example here, we should pass the base URL and it looks like we do that by passing importMetaURL, and it will return a resolver function, which we can then use to resolve the relative path. But I really want to know what is this importMeta that is used here. Let's look it up.
importMeta I'll check out the importMeta object. Okay, so it looks like ImportMeta is a built-in operator in ES modules that provides information about the current module, including the full URL to the module. Now, back to our entry point and let's do just that. I'll import CreateResolver from Nuxtcat and start using it like we just saw.
So it will be const resolver and we'll set it to CreateResolver passing ImportMeta URL. And now we can use the resolve function provided by the resolver and pass the path to the asset. And you know what? We can clean this up by destructuring resolve out of resolver.
Like so. And this should work exactly the same. Let's test it with yarn dev. Inspect.
And there it is. And that's not all what the create resolver can do. We can also use it to resolve paths to directories, not just files. For example, there is a configuration option in Nitro called public assets.
The directories you push to this option will be treated just like the public directory inside your Nuxt app. I created images directory inside the runtime directory, and it has a used cool PNG logo. Let's expose that directory to Nitro. And to extend Nitro configuration options, I'll use hooks, and I'll use a hook actually we used before, which is Nitro config.
which passes nitro configuration options as parameter and inside those options if public assets doesn't exist I'll set it to an empty array and inside nitro config public assets we will push an object that has a dir property and in this property we should pass the full path to the directory so I'll grab the resolving logic up here and then start resolving the path to the directory. Runtime, images. Then we should specify max age to set cache control headers. So I'll set that to 60 seconds, 60 minutes, 24 hours, 365 days, which all of that will evaluate to a year in milliseconds.
So this asset will live a year in the cache. And before we run a dev server to see that in action, I would like to console log the full path after it's being resolved to show you how it looks like. So let's console log and just copy this over here. Now bring up the terminal and yarn dev.
And this is how the resolved path to the directory looks like. It goes all the way from the base path to the images directory. Now let's have a look at the dev server. If we head to View School, And all thanks goes to the CreateResolver from NuxtGet which helped us resolve the fall path to the images directory.
Then we could pass it to Nitro, and Nitro could scan the directory and inject the assets inside it to the application runtime. And then we were able to pick it up from the browser. And that's it for this lesson. In the next one, we will explore more utilities from NuxtGet.