Chrisos Dev Setup for Nuxt applications

My Node base Development setup for Nuxt applications on macOS.

Prerequisites

• Install command line tools on macOS

xcode-select --install

Proof installation:

git --version

Install Node Version Manager (nvm)

Use the following command to install nvm, which allows you to manage multiple Node.js versions easily. https://github.com/nvm-sh/nvm

Direct command. Check if new version is available.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

proof installation:

nvm -v 

Install first (latest LTS) Node.js version:

nvm install --lts

Set default Node.js version:

nvm alias default lts/*

Proof installation:

node -v

Use nvm -h for more commands and options.

Use PNPM instead of NPM or Yarn

As a package manager, I prefer PNPM for its speed and efficiency. https://pnpm.io/installation

Install PNPM globally using npm (after installing nvm and Node.js):

npm install -g pnpm

Note: Do this on each node version you've installed with nvm.

Proof installation:

pnpm -v

IDE Setup

Install VS Code

Download and install Visual Studio Code from https://code.visualstudio.com/. Use the Apple Silicon version.

Recommended VS Code Extensions for Nuxt Development

must have:

• Vue (Official)
• Path Intellisense
• Vitest
• ESLint

for a better life:

• Atom One Dark Theme
• GitHub Copilot Chat

for further development:

• tailwindcss IntelliSense
• Prettier - Code formatter
• ToDo Tree
• Oxc

Hacks

Use CMD + SHIFT + P and search "Install Code Command in PATH" to enable terminal command code . to open VS Code from terminal.

Keymaps

Use the following keymaps for better productivity in VS Code:

• CMD + P: Quick file navigation
• CMD + SHIFT + F: Global search
• CMD + B: Toggle sidebar visibility

and more...

Overwrite the command CMD + T to open the build in terminal:

Use Nuxt MCP Servers:

Check documentation: https://nuxt.com/docs/4.x/guide/ai/mcp

Setting up a new Nuxt project

To create a new Nuxt project, you can use the following command:

pnpm create nuxt@latest <project-name>

Recommended option: Choose "init git repository" to have version control from the start.

Open directory:

cd <project-name>

and start it in the IDE

code .

Nuxt Modules

Checkout the Nuxt modules for additional functionality: https://nuxt.com/modules

Recommended modules:

• Nuxt Fonts: npx nuxt@latest module add fonts
• Nuxt Image: npx nuxt@latest module add image
• Nuxt Icon: npx nuxt@latest module add icon (use icons form https://icones.js.org/)

Checkout official Nuxt SEO module for better SEO handling: npx nuxt@latest module add seo

Start development server

To start the development server, use the following command:

pnpm dev

This will start the Nuxt development server, and you can access your application at http://localhost:3000. You can open it in your web browser to see your Nuxt application in action.

Additional Tools

Install Homeberw for more command line tools:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD
/install.sh)"

Git Setup

Basic Git Configuration for Working with GitHub:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Use zsh with ohmyzsh

Install ohmyzsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Why?

• Better terminal experience
• Many plugins available
• Git Shortcuts like: - gst for git status
  • gco for git checkout
  • gaa for git add .
  • gcmsg "message" for git commit -m "message"
  • gp for git push

Create alias for starting dev server quickly

Add the following alias to your ~/.zshrc file:

alias prd='pnpm run dev'

Then, you can simply type prd in your terminal to start the development server quickly.