Let's get started with a Nuxt UI project. I'm going to start with a dashboard template that you saw in the official registry in the last lesson. So if I open that up in GitHub, you can see the complete source code. And this is the command we want to run to start with this template.
Awesome. In my terminal, let me paste that in. I'll add this to a folder called Nuxt UI course. I'll go with PMPM, but you can use whichever package manager you prefer.
Yes, we'll initialize a Git repository. As for Nuxt modules, we might end up using Nuxt image. So let's go ahead and add that. Awesome.
Finally, we can open up the project in Cursor. Here, I'll start up the dev server. I'm using a CLI tool called knee. json scripts.
So I'm gonna run in our dev to start up the dev server. If you're interested in using knee yourself, I've left a link to it in the description below. Now in the browser, you can see the dashboard that we're starting with. It has a nice homepage with a chart on there, main navigation links that takes us to the different pages of the dashboard, and a nice collection of different pages that show off various UI elements.
vue. So in here, there's not a whole lot Nuxt UI specific going on, except for the usage of this component right here. The Uapp component should always wrap your entire applications when you're using Nuxt UI. Why?
Well, it provides global configurations through Provide and Eject. It also enables all primitives to inherit global reading direction so that I-XVIIIn or internationalization is supported, as well as a number of other features. Suffice it to say, you just make sure you add it at the top level and everything else will work as expected. Inside of this, we have the Nuxt layout and Nuxt page component.
Not special to Nuxt UI, but this does mean that this template supports layouts. So let's go to that next logical layer and take a look at that default layout. And here it is. It has some links, all nicely organized inside an array.
These are the links for the main navigation that you see in the sidebar. So we have home, inbox, customers. And sure enough, here we have home, inbox, customers, so on and so forth. Each of the links has a label and icon.
I get to see the icon in line because I have the Iconify IntelliSense extension for Cursor or for Visual Studio Code installed. So I definitely recommend you install that extension as well. It comes in handy. You're also able to add a badge with a counter in there and a link, of course, to each of the pages in the links array.
Okay. Notice that this links array satisfies a navigation menu item. This comes from Nuxt UI and helps keep you on your toes when you're defining new links so that you get type safety as you're creating them. Also notice here that this is an array of two different arrays.
So we have one collection of links here and we have another collection of links here. We suddenly got a lot of red squiggly lines, but I'll help you deal with that in just a moment. The idea is that we've collected links for the top section and then the bottom section separately. Intuitive and that works.
Okay, so now these red squiggly lines are really getting on my nerves. So let's fix that real quick. config and take a look at the ESLint configuration, notice that it's using ESLint to provide formatting. I'm totally fine with that.
And it's really the recommendation that a lot of people on the Nuxt team give just based on the code that they're putting out. Even though I typically like to go with prettier, which is why on save, I'm getting all these red squiggly lines because my file has been formatted with Prettier, which is my default formatter. This, of course, is fighting with the ESLint formatter set up for the project. json file.
DefaultFormatter. And instead of setting that to Prettier, let's target the ESLint extension by DBomber. Also in order for this to work properly, make sure you do have the ESLint extension installed. Back in the layout, if I hit save again, sure enough, everything is reformatted according to the ESLint formatter and all of those nasty red squiggly lines go away.
So that's one little thing you might have to do in your own projects as well. I want to skip past a little bit of this stuff going on inside of script setup. And then let's get down to what's happening inside of the template. Here you see some Nuxt UI components in action.
We've got a U dashboard group, which if we inspect things in the browser and try to find that component, it does indeed wrap the whole page. There's also the U dashboard sidebar, which is just the left-hand side. We've got the U dashboard search here, which displays whenever we click this search button here. Alternatively, we could also press Command K, which is really cool.
That's just a showcase of defining shortcuts in action. Back in the code base, this U Dashboard sidebar clearly has several different slots. It has a header slot in which the Teams menu is added. So that puts the Teams menu right here at the top of the sidebar.
It has a default slot where we do have that search button as well as the navigation menu. Notice that the items going into the navigation menu are the first array of items inside of that links array. And then we just have another you navigation menu that has the second item in that links array added as the items. So nothing really special about the makeup of that array, except for the individual link objects in each top level array.
It looks like we should also be able to add till and CSS classes very easily, which is great. So if I add bg, I don't know, red, five hundred to the U dashboard search button, what do we get on the page? Yeah, we get a red search bar. Makes a lot of sense.
Let me reverse that just a little bit. and then take a look at this UI prop on the U Dashboard sidebar right here. It looks like we're also passing in Tailwind CSS classes. So if I pass in bg red, five hundred, and then take a look at that in the browser, yeah, sure enough, that is also red.
but notice that I don't get my wonderful autocomplete for Tailwind CSS or the nice little red swatch that typically comes up when you use a color-based class. No worries, some simple tweaks to our VS Code settings will fix this as well. I'll paste these in. These are directly from the Nuxt UI docs, and I'll leave a link to that page in the description below.
The one that's specifically helping us in this use case is this line right here. We're saying that toe and CSS classes might appear in attributes or in the case of view terminology props that are called UI as well as class, of course. view, yeah, now we get the nice red swatch and my auto-completion works as expected. But I don't want that to be red, that's gross.
So I'll remove that. Do note that this Tailwind functionality relies on the Tailwind CSS extension to be installed. Okay, we've got our project set up. We've got our editor configured to best work with Nuxt UI, and you've got a little peek into the topmost elements of the application and how they're working.
In the next chapter, let's talk about the design system.