Nuxtcat provides several utilities to help you create and use pages in your application. These utilities offer flexibility and control over your page configuration and routing behavior. In this lesson, we will explore those helpful utilities, so let's get to it. In Nuxt, we can easily create new routes by adding a bunch of directories and view files inside the root of our Nuxt application, inside the pages directory.
And like magic, Nox dynamically creates the pages and the routes for us. And after Nox is done with the pages directory, NoxKit has utilities that takes those pages and allow us to manipulate, extend, or delete them by using the extendPages() function. And using this function is pretty straightforward. I'll go right here and use the extendPages() and this function passes a pages array which contains pages object.
Then we can do whatever we like with it. So we can add more pages to the pages array like this, and pass the page properties. So it's not just that Nuxt dynamically creates the pages and the routes for us according to whatever files we add to the pages directory over here, but also it's passing those pages around for users to manipulate using Nuxtcat utilities however they like. I have to say, this is pretty cool.
And if you're wondering how Nuxt is doing that, let me feed your curiosity and take you in a quick journey into the Nuxt codebase. So what do we have in here? We're inside the Nuxt core codebase and we are exploring this module in the pages directory. So it turns out that just like we as Nuxt users are using modules to tweak things in Nuxt, the Nuxt core codebase is also using modules for the same purpose.
What we're looking at here is the local module that is responsible for extending pages with the files that you add to your project's pages directory. While this module is so tempting to follow explore, I won't get into too much details. I'm here to show you a friendly face inside this big file. I'll go for isPagesEnabled function and you see this pages extend hook?
We previously mentioned it in our next hooks lesson. And now it is referenced here in the isPagesEnabled. But it looks a bit weird than the way we know it. The reason behind this is that it's not used here as a hook.
In fact, it's firing or triggering the actual hook for us to utilize. And it's doing so by using this callHook function in Nuxt. So this isPageEnabled function first scans the pages directory and all the pages inside the application. And then...
It's triggering the hook, which is the page's extend hook, and passing the pages as a parameter for us to utilize and manipulate. And then, when it wants to use the final pages to register the routes and continue with the workflow, it gets them from the hook the same way we normally do, which is next, hook, where it is, I think it's pages, extend. There it is. Right here.
This means that NuxtGetExtendPages function, which is this one, must be using the same set of pages that is being passed by the PagesExtendHook. So let's get to the import statement, click on command, and then click on the ExtendPages. This will take us to the declaration for this function. And here it is.
It is indeed accepting a parameter of PagesExtend, which is the PagesExtendNuxtHook. which is basically an array of the type NuxtPage. So let me just close those, get back to the definition of the module. And what is the takeaway of what just happened?
Or what did we learn from all of that? Well, we learned that extendPages function from NuxtGet is just a wrapper for pagesExtendHook. So this page's push right here is exactly the same as doing something like this using NuxtHook and call pages extend hook and then have the pages and pushing from here pages push awesome we just exacted the extend pages function so let's work with it so i will create a new directory in the runtime directory called pages and inside of it i will create a new file called let's say pagination good view and here i'll have a simple template that will display the page number and we will have a page property to display. And then let's create a script setup, like so, and have the page variable created, and it will be a variable ref.
And I'll use the useRouteComposable to get the page's parameter. But we need to remember always to import whatever we need from imports. And this is because Nox Auto Imports doesn't work in modules. So we will import ref, and use route composable.
Now back to the module definition and let's use this extend pages to inject this dynamic page that we just created from within the module to the Nuxt app. We will push this page that we just created to the pages array. So any changes we make to the pages must be done to this array directly. Because as we explored earlier, Nuxt will later use this exact same array to register the pages in the app.
So the first property in the page object is allowing us to give it a name, and I'll call it courses-pagination. view. And finally, we need to define a path where we want this page to take effect or to be used. So let's say I want this page to be used, when the user visits courses page.
Now if we start a dev environment like so and then head to courses one for example that didn't work and I think I know why because probably we missed adding nox page over here and without it pages won't work so let's add nox page component and then let's check again and there you go it's working like a charm. And this is how you inject a page inside your Nuxt app from a module. And in the next lesson, we will learn how to extend drought rules and add drought middlewares. I'll see you there.