Vue components are the indispensable building blocks of Vue. Each one encapsulates related blocks of code housing both JavaScript and CSS in a single file. Need a button? Import a component.
Need a fancy card? Just grab another. This modular approach makes building interfaces a breeze. In Nuxt, things get even smoother.
It automatically scans your components directory and imports them all for you, saving you manual import statements. However, when it comes to components nested within a module, Nox needs a little nudge to be aware of them. In the code I have here for the Playground app, we have this page that presents a list of codes. Each code should be displayed inside this component, cardColor.
But the Nox app here doesn't have this component yet. So if we run Dev, like so, we get all sorts of error that this component is not there. Now, let's say that you are developing a component library and that you have this component inside your module over here. And you want to provide this component to the running Nuxt app from within the module.
And this is where we need some help from NuxtKit. It offers methods to inject a component into your application or make Nuxt scan additional directories to auto-import the components inside it. The first method we're going to talk about is add component and this method accepts an object and this object has two required properties name and file path the name property is used for giving any name to the component as a string of letters so in our case it will be card color as for the file path it should be a full resolved path to the component so it will be runtime cards then color did view If you only define the name, Nox will automatically use the value to generate both Pascal and Kebab names. But you have the option to manually set name for those two.
But if you haven't, the Pascal name will evaluate to card-colored like this. And the Kebab name will evaluate to card-colored. Let me take those off now. Nox.
d2ts file. And this is where Nuxt is declaring all auto-imported components. And we should see our component is auto-imported amongst all other Nuxt built-in components. There are other useful options in the addComponent function though.
We have the export property, so whether you would like this component named export or exportDefault. And the default value here is default. And we can use the chunk name property if you would like to change the default component chunk name set by Nuxt. And we also have prefetch and preload.
Both of them are to add Webpack's magic comments to create browser hints to whether it should prefetch or preload the component. And we also have global, and it's for registering the component globally in the application. But it's not recommended as it will prevent Nuxt from tree shaking the component if it's not used. And we have the mode property to whether you want the component to be client side or server side or even both.
And if more than one component have the same name, we have the priority property. So the component with higher priority will be used in that case. Another pretty cool option is island. And it is used to make Nuxt register the component as a component island.
If you don't know what are component islands, they are a revolutionary new experimental feature in Nuxt 3. They are like little islands of static content, completely free from any client-side JavaScript and listed within your dynamic application. I can talk all day about server components and Nuxt islands, but this is outside of this Coursescope. But if you're interested, just let us know in the comments section below or on any of our social media accounts.
So let's get back on track. The other method to add components to the application is add-components-dir. It exposes a directory to Nox for Nox to do its magic and auto-import the components inside this directory. Let's see that in action.
I'll clear that up and then start using add-components-dir. It also accepts an object and the property path and this will accept a full resolve path to the directory. So runtime. We can also use the prefix property to prefix all scanned components with a string.
So by doing this, we are adding card as a prefix to all imported components inside this directory. And if we run dev now, then check on the declaration file, we will still find our component auto-imported with a prefix and a name. So let's get back to the module definition and talk about more useful properties. js extension We can also pass isAsync option and set it to true and then next we'll load the components in a separate chunk even if it's not prefixed with lazy to dynamically import it.
Another option is to extend component which is basically a function that will run with each component inside the directory and this allows you to extend functionalities or extend options of the component like modify the options. So it will pass the component as a parameter and then you can use it to tweak the component's options. So maybe we can do a certain change according to the component name. So we can say if component Pascal name is called colored, then component prefetch set to true.
And of course you can log the component to the console and make sure that everything is in order. And finally, don't forget to return the modified component, the one that you changed. So now if the directory has many components, it will only apply this change to the card-colored component. And we get to also define global boolean option to register the components globally or watch option to watch for changes in a specific path.
And that wraps our exploration of module components for now, but keep in mind that there are many more options available in Nuxt documentation. so feel free to explore them if you have any questions leave them in the comments and stay tuned for the next lesson where we will dive into the world of auto imports.