js, auto imports are a big deal. They make coding way easier by cutting down on all those boring import lines. They let us utilize the stuff we use the most, like components, view composition APIs, and functions. And this is throughout your whole app.
nox directory, then imports declaration file, You will find all Nox Auto Imports that are available for us to use anywhere in the app without having to import them. So far in this course, we covered using NoxKit utilities to inject plugins and components from a module to the Nox Auto Imports. Now in this lesson, we're diving into how you can throw in your handy functions, composables, and view composition APIs into Nox Auto Imports as well. Let's get back to the module definition and start exploring.
We have two types of imports. The first one is to import something from a package, just like what we're doing here. We're importing defineNuxMajol and createResolver from NuxtGetPackage. And the other type of imports is to import something from a local file.
js, just as an example. So whether we are importing something from an external package or we are importing it locally, Nuxtcat has the right tools for each of those scenarios. Let's see first how we can add things from third-party packages to Nuxt auto imports. We can use add imports from Nuxtcat to accomplish this.
I will use it right over here, like so, add imports, and then pass the options. We first pass the name of what we're trying to import, so let's say that we want to import renderToString function to be available globally. No need for us to get into too much details about this function, but it's used when setting up Vue with server-side rendering support, and no point of importing it globally, I'm just using it to demonstrate the concept. Anyway, to include it in Nuxt Auto Imports, We can then specify what name we want to import it as, so we can add this as property and then name it whatever we want.
So let's have like a short name for it, so render to str. Then we say that we want to import it from this package which is view server renderer. nox directory right over here and look for our function render to str you will find it over here like so it is being imported as it is and then it's being named render to str which is the short name that we came up with and now we can use this function anywhere inside the Nuxt app without having to import it we can also add multiple functions instead of only one so this will be an array of objects instead of passing an object like so and then we can add any other function I got another function copied behind the scene so I'll just paste it and it will look like this. If we take a look at the example over here for the add imports inside the documentation, we will see that it uses the function in a different way to add multiple imports from a package.
But it's really doing the same. view or storyblock forward slash view package. And it basically just doing a forEach loop for this array, and for each one it triggers the addImports function and passing an object with the name of the current function name, setting its name to the same name, and saying that it needs to be imported from the StoryBlockView package. So it's doing the same, but in a different way.
So I thought that I'd just show you this. It's worth mentioning that there is another or a better way to import multiple functions from third-part packages, and this is by using AddImportsSources utility from NuxtKit. I'll just remove this example from over here, it's useless, and start using the AddImportsSources. It makes things way easier.
So, it goes like this. I'll pass an object as well, and the first option is the From, and I'll say that this is from View Server Renderer. And then the second one is imports, where we define the imports over the functions that we're trying to import from this package. And those are renderToString and also renderToNodeStream.
I'll comment out this. Start a development server. Let me start a new one. Like so.
I'll hide the terminal. And then check out our imports declaration file. Let's look for them and there they are, renderToString and renderToNodStream from ViewServerRenderer. So it works and it does the same, but it's much easier when importing multiple functions.
Taking a very quick look at the example in the documentation, we will notice that it's following the same approach we did, which is using the from property to define which package we're trying to import from, and the import property to define what are the functions we're trying to import. So, if you take a look at the options for the add import sources, you will notice that it's very similar to the same options in the add imports function. So, feel free to explore all of them, if you have any trouble with any of them, just leave a comment. That's it for importing from third party packages.
To import your own utilities and composables, we can use the add imports dir utility. To demonstrate this, I added this dummy composable. inside the runtime composables directory and it's called use trailing slash. It's just a basic implementation to add or remove a trailing slash from a URL.
Now let's expose this to Noxt. I'll just comment this now and let's get started over here. And it's really very straightforward. So we use the add imports dir and then we pass the full path or the full resolve path to the directory.
So we say resolve, and then the path to the directory, which is runtime, and then composables. And that's it. The add imports dir utility also accepts another parameter as an object, which represents options. So we can add the prepend option, like so, and set it to true, and the imports will be prepended to the last of imports.
So it's time to bring up the terminal, and then run another dev environment. And then we need to check our declaration file for imports. There you go, useTrailing slash is imported and available for us to use across all the Nox app without having to import it. So I'm done with this lesson, but just a little note before I let you go.
Those functions or utilities we just talked about are designed to be used for importing utilities, composables, and view composition APIs. We can't use them to import pages, components, and plugins. We already tackled components and plugins in earlier lessons and in the next lesson we will explore expanding pages, route rules and more. So I'll see you there.