Setup Vue.js on Linux

Setting up Vue.js on Linux requires Node.js and npm. This guide covers everything from basic setup to professional development environment.

Prerequisites

Install Node.js and NPM

Ubuntu/Debian 

sudo apt update
sudo apt install nodejs npm

Fedora/RHEL 

sudo dnf install nodejs npm

Arch Linux 

sudo pacman -S nodejs npm

Using NVM (Recommended)

NVM lets you switch between Node.js versions:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18

Create Vue.js Project

Using Official Vue CLI 

npm create vue@latest my-vue-app

You’ll be prompted with configuration options:

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

Navigate and Setup 

cd my-vue-app
npm install
npm run dev

Your app will be available 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 Environment

VS Code Setup

Install VS Code using your package manager:

# Ubuntu/Debian
sudo snap install code --classic

# Fedora
sudo dnf install code

Install essential extensions:

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

Browser DevTools

Install Vue.js DevTools for your browser:

Advanced Setup

Vue Router Integration 

npm install vue-router@4

Pinia State Management 

npm install pinia

Vue CLI Global Installation 

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

Common Issues

Permission Denied with NPM 

# Configure npm to use a different directory
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

Port Already in Use 

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

Node Version Incompatibility 

# Check Vue.js compatibility
nvm install 16
nvm use 16
npm create vue@latest

Production Build

Build for Production 

npm run build

Preview Production Build 

npm run preview

Additional Tools

Nuxt.js for SSR

Install Nuxt for server-side rendered applications:

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

Vue Testing Library 

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

Sources

For other platforms, check our Vue.js macOS setup and Windows Vue installation.