Create a new Nuxt project
To start our project, we need to first create a Nuxt project. We do this through the terminal command npm init nuxt-app my-digital-garden. Then we will run through the first-time setup to make sure it's all configured how we need it to be.
Instructor: [0:00] To get started, open up your terminal and run the command, npm init nuxt-app my-digital-garden. What that'll do is kick off a CLI prompt that will allow us to configure various aspects about our project. At the start, we can configure our project name, which we've already named, My Digital Garden. Let's go ahead and hit Enter.
[0:16] Then, you can see here that for our programming language, we can select JavaScript or TypeScript, then you can use your arrow keys to determine which one you prefer. I'm going to assume that we want to use JavaScript. Let's go and select that by hitting Enter.
[0:27] Then, for our package manager, if you're using yarn, go ahead and hit Enter. Otherwise, I'll assume you're using npm, since that's what most people have installed by default.
[0:34] Next, you can select a UI framework to integrate with your project. For now, we're going to select None. Then, here, you'll see that this is where the Nuxt.js modules come in. You might notice that down here on the third line, we have the @nuxt/content module, which we'll be using.
[0:47] Now, if you want to go ahead, and you're setting up a brand new project, you could just hit Spacebar right now. That will show that you've toggled it green, which means that you've selected it, and that can be included in your project. For this course, I'm going to actually check it off, because in the next lesson, I'll show you how to install that manually, so that if you're upgrading an existing Nuxt project, rather than starting from scratch, you'll know how to do that as well.
[1:06] Moving on, linting tools. Normally, here, I would probably select something like ESLint and Prettier. For the simplicity of this project, we're not going to select any at all. We're not going to have a testing framework, so I'll hit Enter. Then, for rendering mode, lets go and use Universal, which allows us to do static site generation, which is important for things like a digital garden or a blog.
[1:24] For the deployment target, let's go ahead and do static, so we can do some Jamstack hosting. For development tools, I'm going to go ahead and enable jsconfig.json, since I believe most of us will be using VS Code.
[1:34] Finally, I'll configure my GitHub username, which is [inaudible] , and then select my version control system, which is git, and then let it go ahead and update and install all the packages that it needs. Once it's done, you should see the success message here, "Successfully created My Digital Garden."
[1:49] Let's go ahead and dive into the project. We'll go ahead and change directories by running, cd my-digital-garden. Once we're in here, let's go and open it inside of VS Code. For me, that command is code., which opens the current folder inside of VS Code.
[2:04] Now that we're inside the project, let's go ahead and run the local DevServer, to make sure that everything is working as expected. We'll do that with the command, npm run dev. Once everything starts up, we'll see that it's being run at localhost:3000. We open that in our browser, and you'll see that...there we go, we'll see that our local DevServer is running
[2:22] To make sure everything is working correctly, let's go ahead and make a change. I'll switch the tutorial component to a H1 of "Hello, Egghead." Looks like everything works. With that, we're now ready to dive into the @nuxt/content module.