Installing Nuxt: Getting Started with Nuxt 3

Getting Started with Nuxt 3

Sign in Get started

Playing

02. Installing Nuxt

Transcript

00:00

Okay, so obviously the first step is to get NUX installed. Let's head over to our terminal and let's go and create a brand new completely fresh NUX project.

00:09

For this we're going to go ahead and use NPX and we're going to use the NUXE command. We're going to go ahead and initialize a new project and we're going to give it this name. I'm just going to call this NUX3. Let's go ahead and hit enter on that and just wait for this to finish.

00:23

And you can see that's pretty much already done. Let's go ahead and cd into the NUX3 directory. And now we need to install the dependencies for this. So let's use npm to install this either with the i or install command and just wait for this to finish.

00:37

Okay, now that's done we're going to go ahead and open this up in our editor. And now that we've got that open we can go ahead and start a local development server just before we start to have a look around what we get when we install a fresh NUX project. So I'm going to go ahead and run npm run dev.

00:52

We'll take a look at that command in just a second but that's pretty much gone ahead and just started a local development server for us. So let's go over to the browser and let's open this up. So we're going to go ahead and grab the local host link here for port 3000.

01:08

And we're just going to go ahead and pop it in. There we go. There is our fresh NUX project set up and ready to go. Now I've got Vite open here which is a build tool for not just view

01:20

for pretty much any projects front end projects. Now NUX utilizes Vite for very very quick HMR support. Now what this allows us to do is make changes to NUX and see them pretty much instantly appear in the browser.

01:36

So we'll take a look at this through the series but that's pretty much what's happening behind the scenes. You may have even used Vite to build projects but if you haven't don't worry too much. NUX takes care of all the finer details of that.

01:48

Okay, so now that we've got a fresh NUX project open let's just take a look around the directory structure here. Now if you're coming from NUX 2 you're probably wondering where all of the folders are.

01:58

We'll go into them as we progress through the series. Let's start out with this package.json file in here. Now at the moment the only dependency that we have for our project is NUX 3 so that's the only thing that's being pulled in at the moment.

02:13

You can see that we've got this script section just here which has a dev command which is what we've just run, a build command and a start command. So the dev command is pretty much what we're going to be using all the time

02:25

when we're locally developing. When we're ready to push this to production which we're not quite there yet we would use the npm run build command. So this dev command here is pretty much what we just run in here

02:37

to get our local development server up and running. Now if we just head over to app.view you can see here that we've got a standard view single file component and this just has a div wrapper with a NUXed welcome component.

02:52

This NUXed welcome component doesn't exist within our project this is just the file that we see here or the page that we see here open in the browser. So of course we're going to remove that at some point to get started

03:05

and you can see that there's a comment already here telling us to do that. So at the moment this looks very very bare there's not really much else in here. Again if you're used to using NUX 2 this is the configuration file that you will want to use to define any of the config

03:21

and all of that stuff is over in the documentation. We'll of course be touching some configuration throughout this series. So apart from that that's pretty much it. We have a very bare project that we can just get started with.

03:34

We'll be looking at creating a pages folder to create different pages have our routing automatically created for us and all of that good stuff. One last thing to bear in mind is we have this .nuxed folder just here which we don't really want to touch.

03:46

This is where anything that we create inside of our NUX projects gets bundled into that NUX can then use within the framework to run. So we don't really need to touch this .nuxed folder whatsoever but it's there if we want to go and have a look through it.

04:01

So let's just start with a really simple change here. So we can remove this component to get started. Let's do that now and just write home. Let's come straight over to the browser

04:10

and you can see as we were speaking about earlier using Vite this is very very quickly re-bundled this for our development purposes and we now see our home page. So we can just start building our index page within app.vue.

04:23

Now we're not actually going to do that because we're going to make use of NUXed auto routing which we'll be looking at very shortly but we could technically just build everything we needed in this single page

04:34

and just get started as normal. And we could go ahead and even include a script tag here to get started with Vue. Let's just have a real quick look at that. So we're going to go ahead and for the rest of the series

04:45

use the setup script type within Vue. What this allows us to do is not have to explore any kind of default object. All we really do here is just to find things out. For example a greeting.

04:59

Let's do that now. With NUX3 or with Vue 3 in particular this will be automatically available within our template. So if for example we just went and tried to output the greeting here

05:11

you will see if we head over to the browser we get hello. So that's what we're going to be using throughout the series script setup. We do have a series on script setup if you want to go ahead and learn more about how this works. Okay now that we've kind of got the basics of this out of the way

05:27

let's go ahead and revert this back to normal because we're going to be looking at routing very shortly which will involve removing this and replacing it with a completely different component. For now though that is our fresh NUXed project set up and ready to go.

Episode summary

In this episode, we kick things off by getting Nuxt installed and setting up a brand new Nuxt 3 project. We walk through the process using the terminal: creating a fresh project with NPX, installing dependencies with npm, and opening up the project in a code editor. With everything in place, we run the Nuxt development server and check out our new app in the browser at localhost:3000.

There's a quick intro to Vite—the build tool Nuxt uses under the hood—which makes development super speedy, letting us see our changes instantly. Even if you're new to Vite, don't sweat it: Nuxt takes care of almost everything for you.

Next, we take a little tour of the project directory. If you're coming from Nuxt 2, you'll notice things look a lot simpler at first—just a handful of files and folders. We go over the package.json file, check out some of the built-in scripts (like npm run dev), and open up app.vue where the starter content lives. We also mention the special .nuxt folder, which Nuxt uses for its own generated stuff—you can peek inside, but you don't need to mess with it.

To show how fast changes appear, we do a quick edit to the starter component, replace the welcome message with "home", and watch the browser update right away. We briefly try out Vue 3's <script setup> syntax as well, which you'll see a lot more of throughout the series.

Finally, we mention that we'll soon explore Nuxt's file-based auto-routing system, so you won't need to build everything in app.vue. With this foundation in place, you're all set to dive deeper into building with Nuxt 3 in the upcoming episodes!

Episode discussion

No comments, yet. Be the first!