Setup Vue.js on macOS

Setting up Vue.js on macOS is seamless with Homebrew and modern development tools. This guide covers the complete Vue.js development environment.

Prerequisites

Install Homebrew

If you don’t have Homebrew:

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

Install Node.js and NPM 

brew install node

Using NVM (Recommended) 

brew install nvm

Add to ~/.zshrc (default on modern macOS):

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh"
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"

Install Node.js:

nvm install 18
nvm use 18

Create Vue.js Project

Using Official Vue CLI 

npm create vue@latest my-vue-app

Configuration options include:

  • TypeScript support
  • Vue Router for navigation
  • Pinia for state management
  • Vitest for testing
  • ESLint for code quality

Setup and Run 

cd my-vue-app
npm install
npm run dev

Your application runs at http://localhost:5173

Alternative: Vite Template 

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Development Tools

VS Code Installation 

brew install --cask visual-studio-code

Essential VS Code Extensions

Install from VS Code marketplace:

  • Volar (Vue language support)
  • Vue VSCode Snippets
  • Prettier - Code formatter
  • ESLint
  • Auto Rename Tag
  • GitLens (enhanced Git support)

Terminal Setup

Install iTerm2 for better terminal experience:

brew install --cask iterm2

Browser Developer Tools

Install Vue.js DevTools:

Advanced Configuration

Oh My Zsh Setup 

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

Add useful plugins to ~/.zshrc:

plugins=(git npm node nvm)

Vue CLI Global 

npm install -g @vue/cli
vue create my-project

Vue Router and Pinia 

npm install vue-router@4 pinia

Productivity Tools

Git Configuration 

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Useful Terminal Aliases

Add to ~/.zshrc:

alias vue-dev="npm run dev"
alias vue-build="npm run build"
alias vue-test="npm run test"

Environment Variables

Create a .env.local file for development:

VITE_API_URL=http://localhost:3001
VITE_APP_ENV=development

Production Deployment

Build for Production 

npm run build

Deploy to Netlify (Example) 

npm install -g netlify-cli
netlify deploy --prod --dir=dist

Troubleshooting

Port Already in Use 

# Kill process on port 5173
lsof -ti:5173 | xargs kill -9

Node Version Issues 

# List and switch Node versions
nvm ls
nvm use 18
nvm alias default 18

Permission Issues 

# Fix npm permissions
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

Additional Resources

Nuxt.js for Full-Stack Vue 

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev

Vue Testing Setup 

npm install --save-dev @vue/test-utils vitest jsdom

Design Tools Integration 

# Figma for UI design
brew install --cask figma

Sources

For Linux setup, see our Vue.js Linux installation. Windows users should check our Vue.js Windows setup.