Alright then, I hope you managed to solve the exercise from the last time, but if you haven't, just don't worry about it, we're just getting started. Our mission was to inject those links over here to the document's head for our playground application. To get that done, we should head to the module entry point, clear up the boilerplate code, like so, and think about what we should do next. My first thought is to store the links in an array of objects, and store that array in a variable.
I already converted the links in the background to objects and I'm just going to paste them here. Now, the hint I gave you with the exercise was that inside Nuxt Options we have a property called app and inside of it there is the head property and then link property which is an array of objects and each object represents a link. Then using the Nuxt parameter which is giving us access to the Nuxt instance, we can access the options. Like so.
So I'll copy this part over here, delete the rest, loop over the links array, and of course change element to link. And optionally push the links one by one to the Nuxt link array. And that will do it. I already have the CSS added to AppTut view, so this should work as expected.
By the way, we can also inject CSS assets from the module to the app. but we're just gonna do it this way for now. So now let's run a development server and see if Reboto is the font that is being used. Awesome!
That looks like Reboto indeed. But just to double check, I'm using here an extension called WhatFont. When I enable that and hover over the font, it will show me the font name. And it's Reboto.
And if we inspect to have a look at the injected links, we should find them right there. And here they are. So yeah, great job on everything, but this is just a simple task. So let's just fantasize that we are sophisticated Nuxt experts who are about to build a Nuxt module that optimizes the performance of Nuxt apps.
Sounds cool, right? Let's call the module BasicOptimizer. But to better adhere to Nuxt module's ecosystem guidelines, I'll prefix it with Nuxt, so it would be Nuxt BasicOptimizer. I like it.
I'll go ahead and update the name in the package to JSON file. Highlight the my-module text and hit command D to highlight any other instances and replace it with Nuxt Basic Optimizer. So the module name also changed for the repository property. Now I'm going to add my github handle and as for the description let's go with something like a collection of Nuxt optimization options.
I think that's a good start. Now back to the module entry point and let's just clear up everything. Remove this, then update MetaName with Nox Basic Optimizer and config key to just Basic Optimizer. Okay, so now to the important stuff which are the features for our module.
The first one that I can think of is a way to stop console logs in production. 99% of the time, that's exactly what you want to do. We wouldn't want to leak to production things like console-log-please-work or console-log-test-test and all sorts of silly debugging console logs. And luckily, since Nuxt uses esbuild under the hood, we can easily reach out to Vite option, Build property, esbuild property, and finally Pure option, which will allow us to add console-log to the Pure array.
And this should silence all console-log messages in production. So according to this we know exactly what to do. I'll delete it from here and let's implement it from the module. First thing let's create a variable called NoxedOptions and store NoxedOptions in it.
Now if we try to directly modify NoxedOptions with es-built we will get an error because es-built in NoxedOptions is typed as an optional property so there is a possibility that it would be undefined. To work around this, we can use the Logical or Assignment operator. This way, if the ESBuild option doesn't exist, we will just set it to an empty object. And we can follow the same approach for Nuxt Options, Beat ESBuild, Pure.
We'll do the same to work around this. Now we can simply modify the Pure array and push Console Lock to it. So it will be Nuxt Options, Beat, ESBuild, Pure, and then push console log. I'll save the file, go to AppDit view, then import on mounted, and then log any message to the console.
Let's see if that worked. Open up the terminal, I'll end the previous dev environment, and then get inside the Playground directory, build the next application, then preview the production build. So let's check on the console and see if it's logging anything. I'll refresh.
and nothing is logged to the console. Awesome! Now let's take a look at something else. js file.
It is 111 kilobyte. So the file is served as is without being compressed. The good news is that Nitro has an option that will help us compress public assets and also minify the JS bundle. And just like we tweaked the AS-BELT options, how about we enable Nitro to do its magic?
Let's go for it! I will exit the terminal, like so, head back to our entry point, give us some space, and then access the options like we used to. So it will be Nuxt Options, Nitro, Compress Public Assets. I'll set that to true, and then Nuxt Options, Nitro again, Minify.
I'll set that to true as well. Now let's build again and see if that works. And by the way, here is a very cool trick. By holding Ctrl and R, you can search for any recent terminal command you performed.
Just like that. Search for it and enter. Let's have a look at the site. Refresh.
5 kilobytes. That's from 111. And all thanks go to Nitro for compressing the file to Brotli. 0.
which allow us to set default options for useAsyncDataComposable. This can be used to prevent deep reactivity on the data object returned from the composable, which will reduce reactivity overhead for large immutable structures like big arrays of data and deeply nested objects. Anyway, let's just make this happen from within our module. NextOptions has a property called Experimental, and it has defaults property and inside defaults there is useAsyncData, then we need the deep property to be false.
logs, two nitro-compressing public assets, three nitro-monifying JavaScript bundles, and four turning off reactivity in the returned data by useAsyncData in Nuxt. That's great and everything but We've been taking the user's freedom to pick and choose which option to toggle on and which to toggle off. Follow me to the next lesson to fix this problem.