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.