Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

07. Components

Transcript

00:00

Components are a really important part of any view app to separate out things you want to reuse or just keep nice and tidy. Now, within Nuxt, where do we put our components? Well, like with most things, we're going to go ahead and create a top-level components directory.

00:17

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

00:30

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.

00:43

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,

00:58

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.

01:13

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.

01:29

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.

01:41

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,

01:58

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,

02:14

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,

02:30

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.

02:42

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.

03:00

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.

03:20

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.

03:34

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.

03:49

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.

04:03

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.

04:15

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,

04:27

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.

04:36

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.

Episode summary

In this episode, we dive into the core concept of components in Nuxt. First, we talk about why components are useful—they help us keep things neat, organized, and reusable in our apps. We quickly set up a top-level components directory in our Nuxt project and create a simple Greeting.vue component to see things in action.

One of the cool features of Nuxt is that any component you place inside the components folder is automatically imported and available throughout your app—no need for tedious manual imports! We show this by adding our Greeting component to the homepage without any extra import statements.

Next, we refactor a navigation section from our layout into its own Nav.vue component. This not only tidies things up, but also means we can reuse the nav in multiple places easily. We also touch on naming components properly (using capitals) to avoid clashes with native HTML tags.

After that, we experiment with organizing components in subdirectories (like form/Input.vue). It turns out that if you nest components in folders, you need to reference them using their folder names as prefixes (e.g., <FormInput />). This even works with multiple nested levels, giving you plenty of flexibility to structure your components as your app grows.

Bottom line: Nuxt's auto-importing of components makes your life way easier, encourages good app structure, and cuts down on boilerplate code.

Episode discussion

No comments, yet. Be the first!