Sign up to access "Getting Started with Nuxt 3" right now.

We're going to start to create some components in here. Let's just look at a really simple example of a greeting. So let's create a greeting.view component out. Notice that we're using a capital G here instead of the convention

where we use lowercase for everything else. That's because this gets treated like a standard view component, which we can import or we typically import and use any way we want. So let's just go ahead and say hello inside of here.

And let's look at using this over on the homepage. Now, normally what we would do within view with the script setup example is go ahead and import this. So typically, we'd do something like import greeting from,

and then we would go into the directory that we wanted, for example, components, and then go ahead and pull in greeting. Now, we can do that, but within Nuxt, there's no need to do this. This gets automatically imported globally into your application for you.

So we can go ahead and leave this here. And just to find out our greeting component inside of our template, head over to the homepage, and you can see we get hello just inside of there. So that works normally, but like I said, these get auto imported.

So we can actually exclude this altogether, or if we didn't even need script setup, we could remove that too. So you can see that if we come over now, refresh that, it still exists inside of here, which is great.

So anything that we create inside of components gets automatically registered. Let's look at one component that we would actually want to move over, which is inside of layouts and default, our global navigation. If we had another layout which also used this navigation,

we'd probably want to define this as a component so we didn't have to duplicate it. So let's go ahead and get rid of this, and let's define out a nav component in here, and let's create that over in the components directory. Notice that we're using capitals here because if we just head over here,

we don't want to use nav, that conflicts with the HTML native nav element. So over in nav.view, we can just go ahead and split this up, create this unordered list inside of here, and now we can use that over in our layout. Even though we're not working on a page,

our components will still be registered and we can still use them. So let's just go ahead and cancel this off, rerun npm run dev, and let's wait for this to load. There we go, we still have our nav in there.

So if we wanted to use that on account as well, for example, we could now go ahead and say nav, and we now have, if we head over to slash account, our primary navigation, and then our specific account navigation in here.

So things are starting to come together. Now, what happens if we want to organize our components in a better way? We don't just want a components directory to be flat necessarily. We might want to create a specific folder in here to house a certain select set of components.

For example, we might have some form components. Well, let's go ahead and create out an input component in here, which we might want to register globally, and let's see what happens. So I'm going to go ahead and just create a standard input with the type of text.

Of course, in here, you could start to accept props in, bind these in, whatever you wanted to do, but we'll just keep this empty for now. Okay, so input.view. Let's go over to the account section, and let's try and import this component in here.

So let's try input first of all and see what happens. Let's come over to slash account and see if we can see that component. Sure enough, we get a 500. Let's just cancel this off and rerun it, and let's give that a refresh.

Yeah, we're still getting a 500. That component cannot be found. So instead, what we do is we prefix this with the name of the folder, form, and then input with this casing.

Let's try this again. So let's go over and give that a refresh, and there it is. So if you house your components within directories in the main component directory, you just want to prefix them with the folder that they're in,

and this will work for any level deep. So you might have form and default input. That would be another folder within form, and then input would exist within this folder.

You kind of get the idea. So there's another benefit of Nuxt. Creating a component within that directory will automatically register it globally for you, and you can just start using them wherever you need.