The Perfect Guide to Setting Up a New Nuxt Project

Every time I create a new Nuxt project, I follow specific steps to ensure an optimal setup. I've been working with Nuxt since 2019 and have developed specific habits when initiating new projects.

Through my experience, I've explored numerous modules and reviewed projects from both experts and beginners. This has given me a solid understanding of what works well in the Nuxt ecosystem. Setting up a new project can be daunting, especially for newcomers, so I've decided to share this guide to help you set up your Nuxt project as efficiently as possible.

Creating a new Nuxt project

Let's begin with creating a new Nuxt project. This is the simplest step, requiring just one command:

npx nuxi@latest init <project-name>

!TIP You can also create a v4 ready project with npx nuxi init nuxt-app -t v4-compat, avoiding the need for Prepare for Nuxt 4.

!NOTE I always choose pnpm as my package manager. You can select the one you prefer, but I recommend trying pnpm.

Running this command will scaffold a new Nuxt project within the <project-name> directory. The app is minimalistic, no configuration, no modules, just Nuxt and an app.vue file.

Update the dependencies

Before proceeding, it's essential to update dependencies to their latest versions. This ensures you can leverage the newest features and bug fixes while avoiding issues that outdated dependencies might cause. Execute the following command to update them:

npx taze -w

The taze package, developed by Anthony Fu, updates all dependencies to their latest versions. It's similar to npm-check-updates but more powerful due to its adherence to semver versioning, offering both speed and reliability.

Prepare for Nuxt 4

Currently, the latest stable version of Nuxt is version 3. However, version 4 is in development and promises numerous features and enhancements. Although not officially released, you can prepare your projects for this future update by adding the following configuration in your nuxt.config.js:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  }
})

This setup enables you to start developing your projects as though you're already using Nuxt 4. This foresight not only allows you to benefit from upcoming features but also minimizes the work required to upgrade when Nuxt 4 is released.

To make the most of Nuxt 4, create a new app folder and move the app.vue file into it:

mkdir app && mv app.vue app

!TIP You can also create a v4 ready project by using the npx nuxi init nuxt-app -t v4-compat command.