Creating a fresh Nuxt project

You can technically set up a Nuxt project from scratch yourself, and I'll show you how at the end of this post. It is much better and easier to just use their command-line tool nuxi, so let us start with that:

npx nuxi init my-nuxt-project

Just replace 'my-nuxt-project' with your project name.

Voila!

Now you'll have a new nuxt project with some steps in your cli to install dependencies ✨. Remember to use pnpm. As we go along through the course and start coding, you can use that project to follow along with examples. If you are familiar with git, make a branch of the fresh project to work on and every time we start on something new, you can just make a new branch off master/main and start fresh!

Starting a project from scratch

Just for the sake of curiousity, I'll show you how to start a Nuxt project from scratch.

First initialize a new folder with pnpm

mkdir my-new-project && cd my-new-project && pnpm init

The command above uses mkdir to create a new folder called 'my-new-project', then it changes directories into that folder with cd and finally it initializes the folder (adds a package.json) with pnpm. Just follow the steps.

After completing the initialization the project is ready to install Nuxt:

pnpm add -D nuxt@latest

After installing Nuxt let's create the following file structure:

| - app.vue
| - nuxt.config.ts
| - public
| - .gitignore
| - pnpm-lock.yaml (should already exist)
| - node_modules (should already exist)
| - package.json (should already exist)

Update your nuxt.config.ts file with the following:

export default defineNuxtConfig({})

Update your app.vue file with the following:

<template>
  <NuxtWelcome />
<template>

Add files to .gitignore so it doesn't get committed:

node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env*

Update your package.json scripts:

{
  ...
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "preview": "nuxt preview",
    "generate": "nuxt generate"
  },
  ...
}

In later posts, we'll take a deep dive into all these commands, but for now that's it! You've just set up a Nuxt project. Now you can run:

pnpm dev

And watch your app go live on http://localhost:3000.

Conclusion

Setting up a Nuxt project is trivial! In the next post we'll look at using templates to set up Nuxt projects.