we're going to be bootstrapping our project with Nux 3. Not because we need any server-side rendering, but just because Nux 3 provides a few developer conveniences that'll really make the development experience a lot nicer. new in your browser, you'll see some quick ways to get started with Nuxt. We'll be developing on our local machine, and so I'll choose to use the CLI command down here with the Nuxy CLI tool.
However, if you'd like to follow along with the course totally in your browser, you could start your Nuxt project in Code Sandbox, or in StackBlitz. These require you to have absolutely no software installed locally, and you can run the entire project within the browser. To start the project on my local machine though, I'll type npx nuxie init, and let's call the project TrelloBoard. Once the project is installed, I'll open it up in Visual Studio Code.
One of the really nice parts about working with Nuxt is the super minimal file structure we get out of the box. config file. This is where we can define a number of different modules that we'll install with Nuxt in just a moment. Plus, remember we don't need server-side rendering for our project, so I'll just go ahead and turn that off.
Great. Now let's get to installing some of the dependencies we'll need throughout the course. As mentioned in the last lesson, we will be using Tailwind CSS for our styling. Nux comes with an official module for Tailwind, and to date, it's actually the most installed Nux 3 module.
Let's install that via the terminal. And I'll save this as a development dependency. Great. config file.
Okay, cool. All of our other dependencies installed as well since I didn't run npm install when I first opened up the project. Let's clear out the terminal, and then install a few more dependencies we'll need. I mentioned before that we'll be using ViewDragable.
So let's install that now. Take note though that we are going to use the next version of ViewDragable. The current stable version isn't quite ready for View3, and thus not ready for Nox3. but the next version seems to work just fine.
While I'm at it, let's also install a ID generating library called Nanoid. If you're familiar with the npm package UUID, Nanoid is pretty much the same thing. It just has a catchier name and a few other little conveniences. Also, as I mentioned before, we'll be using Vue Use, so let's go ahead and install the official Nuxt module for Vue Use.
Awesome. I'll hit enter there to start the installation process. And once again, up in modules, we'll register the view use module. We don't have to register any of the others as modules, because they're just dependencies that will import directly where we use them.
Awesome. Let's get our development server running now. And then in the next lesson, we'll be off to the races. Perfect.
We've got the welcome to Nux page showing in the browser. And in the terminal, we do get some warnings from tailwind. saying that no utility classes were detected, but we aren't using any yet, so that's to be expected. we're going to be bootstrapping our project with Nux 3.
Not because we need any server-side rendering, but just because Nux 3 provides a few developer conveniences that'll really make the development experience a lot nicer. new in your browser, you'll see some quick ways to get started with Nuxt. We'll be developing on our local machine, and so I'll choose to use the CLI command down here with the Nuxy CLI tool. However, if you'd like to follow along with the course totally in your browser, you could start your Nuxt project in Code Sandbox, or in StackBlitz.
These require you to have absolutely no software installed locally, and you can run the entire project within the browser. To start the project on my local machine though, I'll type npx nuxie init, and let's call the project TrelloBoard. Once the project is installed, I'll open it up in Visual Studio Code. One of the really nice parts about working with Nuxt is the super minimal file structure we get out of the box.
config file. This is where we can define a number of different modules that we'll install with Nuxt in just a moment. Plus, remember we don't need server-side rendering for our project, so I'll just go ahead and turn that off. Great.
Now let's get to installing some of the dependencies we'll need throughout the course. As mentioned in the last lesson, we will be using Tailwind CSS for our styling. Nux comes with an official module for Tailwind, and to date, it's actually the most installed Nux 3 module. Let's install that via the terminal.
And I'll save this as a development dependency. Great. config file. Okay, cool.
All of our other dependencies installed as well since I didn't run npm install when I first opened up the project. Let's clear out the terminal, and then install a few more dependencies we'll need. I mentioned before that we'll be using ViewDragable. So let's install that now.
Take note though that we are going to use the next version of ViewDragable. The current stable version isn't quite ready for View3, and thus not ready for Nox3. but the next version seems to work just fine. While I'm at it, let's also install a ID generating library called Nanoid.
If you're familiar with the npm package UUID, Nanoid is pretty much the same thing. It just has a catchier name and a few other little conveniences. Also, as I mentioned before, we'll be using Vue Use, so let's go ahead and install the official Nuxt module for Vue Use. Awesome.
I'll hit enter there to start the installation process. And once again, up in modules, we'll register the view use module. We don't have to register any of the others as modules, because they're just dependencies that will import directly where we use them. Awesome.
Let's get our development server running now. And then in the next lesson, we'll be off to the races. Perfect. We've got the welcome to Nux page showing in the browser.
And in the terminal, we do get some warnings from tailwind. saying that no utility classes were detected, but we aren't using any yet, so that's to be expected.