Get your development environment ready and install the Verta Vue Admin Template with this comprehensive guide.

• Node.js: Version 20.19.0 or higher Required
• Package Manager: npm (comes with Node.js) or pnpm Recommended
• Memory: 4GB RAM minimum, 8GB recommended
• Storage: 2GB free space for dependencies

• Node.js: Version 22.x or higher Recommended
• Package Manager: pnpm for faster installs and better disk usage
• IDE: VS Code with Vue and TypeScript extensions
• Terminal: Modern terminal with Git support

1. Install Node.js

   Download and install Node.js LTS from nodejs.org

   Verify installation:

   node --version  # Should show v20.19.0 or higher
   npm --version   # Should show npm version

2. Install pnpm (Recommended)

   Install pnpm globally:

   npm install -g pnpm

   Verify pnpm installation:

   pnpm --version  # Should show pnpm version

3. Verify Installation

   Verify that all tools are properly installed:

   node --version  # Should show v20.19.0 or higher
   pnpm --version  # Should show pnpm version

We recommend Visual Studio Code with these essential extensions:

• Vue Language Features (Volar) - Vue 3 support with TypeScript
• TypeScript Vue Plugin (Volar) - Enhanced TypeScript experience
• Tailwind CSS IntelliSense - Autocomplete for Tailwind classes
• ESLint - Code linting and formatting
• Prettier - Code formatting
• Auto Rename Tag - Automatic HTML/Vue tag renaming

1. Extract the Template

   Extract the downloaded ZIP file to your desired location:

   # Navigate to your projects directory
   cd /path/to/your/projects
   
   # Extract the template (replace with actual filename)
   unzip verta-vue-admin-template.zip
   cd verta-vue-admin-template

2. Install Dependencies

   Install all project dependencies:

   # Using pnpm (recommended)
   pnpm install
   
   # Using npm
   npm install

3. Verify Installation

   Check that all dependencies installed correctly:

   pnpm list --depth=0  # Lists top-level dependencies

4. Start Development Server

   Launch the development server:

   # Using pnpm
   pnpm dev
   
   # Using npm
   npm run dev

   The server will start on http://localhost:5173 by default.

After starting the development server:

1. Open your browser to http://localhost:5173
2. Login credentials (demo mode):
   • Username: [email protected]
   • Password: password
3. Explore the dashboard and familiarize yourself with the layout
4. Check the console for any warnings or errors

The template comes with pre-configured settings that work out of the box. Most customizations can be made through the built-in configuration files:

• Theme Configuration: src/assets/styles/index.css - Color schemes and design tokens
• Internationalization: src/locales/ - Language files for multi-language support
• Router Configuration: src/router/index.ts - Application routing and navigation
• Component Settings: Individual components accept props for customization

For development with hot reloading:

pnpm dev

Build optimized files for production:

pnpm build

This creates a dist/ folder with optimized assets ready for deployment.

Test the production build locally:

pnpm preview

Run TypeScript type checking:

pnpm vue-tsc

Node.js Version Mismatch

# Check current Node.js version
node --version

# Use Node Version Manager (if installed)
nvm use 22
# or
nvm install 22 && nvm use 22

Port Already in Use

# Kill process using port 5173
npx kill-port 5173

# Or specify different port
pnpm dev --port 3000

Dependency Installation Fails

# Clear cache and reinstall
pnpm store prune
rm -rf node_modules package-lock.json
pnpm install

Permission Errors (macOS/Linux)

# Fix npm permissions
sudo chown -R $(whoami) ~/.npm

If you encounter issues:

1. Check the console for error messages
2. Verify Node.js version meets requirements
3. Clear cache and reinstall dependencies
4. Check documentation for similar problems
5. Contact support with detailed error information

Before proceeding to development:

• Node.js 20.19+ installed and working
• pnpm or npm available
• Dependencies installed without errors
• Development server starts successfully
• Application loads in browser
• No console errors or warnings
• Hot reload working correctly