How To Install Vue.js on Ubuntu 24.04 LTS
Vue.js has emerged as one of the most popular JavaScript frameworks for building modern web applications, offering developers an intuitive and flexible approach to frontend development. Ubuntu 24.04 LTS provides an ideal environment for JavaScript development, combining stability, security, and extensive package support. This comprehensive guide will walk you through every step of installing Vue.js on Ubuntu 24.04 LTS, from initial system preparation to creating your first project.
Whether you’re a seasoned developer transitioning to Vue.js or a newcomer exploring JavaScript frameworks, this tutorial covers everything you need to establish a robust Vue.js development environment. You’ll learn multiple installation methods, troubleshooting techniques, and best practices that ensure optimal performance and security.
Prerequisites and System Requirements
Before diving into the Vue.js installation process, ensure your system meets the necessary requirements and you have appropriate access permissions.
System Specifications
Your Ubuntu 24.04 LTS system should have at least 2GB of RAM and 20GB of available disk space for comfortable development work. While Vue.js applications can run on systems with lower specifications, adequate resources ensure smooth development server performance and faster build processes.
A stable internet connection is essential for downloading packages, dependencies, and accessing online documentation. If you’re working on a Virtual Private Server (VPS), ensure your connection is reliable and has sufficient bandwidth for package downloads.
User Access Requirements
You’ll need either root access or sudo privileges to install system-wide packages and modify system configurations. Most Ubuntu installations provide sudo access to the primary user account by default.
For VPS users, SSH access with key-based authentication is recommended for enhanced security. Ensure your SSH connection is stable before beginning the installation process.
Essential Knowledge
Basic familiarity with the Linux command line interface is crucial for following this tutorial effectively. Understanding fundamental concepts like file permissions, package management, and text editing will significantly enhance your learning experience.
A foundational understanding of web development concepts, including HTML, CSS, and basic JavaScript, will help you appreciate Vue.js capabilities and make informed decisions during setup.
System Preparation and Updates
Proper system preparation forms the foundation of a successful Vue.js installation. Begin by updating your package lists and upgrading existing software to ensure compatibility and security.
Updating Package Information
Start by refreshing your system’s package database to access the latest software versions and security updates:
sudo apt updateThis command downloads package information from all configured repositories, ensuring you have access to the most recent software versions. The process typically takes a few minutes depending on your internet connection speed.
Upgrading System Packages
Next, upgrade all installed packages to their latest versions:
sudo apt upgrade -yThe -y flag automatically confirms upgrade prompts, streamlining the process. This step may take considerable time if many packages require updates. System restart might be necessary if kernel updates are included.
Installing Development Essentials
Install essential development tools that Vue.js and Node.js require for proper functionality:
sudo apt install -y curl wget git build-essential software-properties-commonThese packages provide:
- curl: Command-line tool for transferring data from servers
- wget: Network downloader for retrieving files
- git: Version control system for project management
- build-essential: Compilation tools for building software from source
- software-properties-common: Tools for managing software repositories
System Cleanup
Remove unnecessary packages and clear cached files to optimize disk space:
sudo apt autoremove -y
sudo apt autocleanThese commands remove orphaned packages and clear the local package cache, freeing valuable disk space for your development environment.
Node.js Installation Methods
Vue.js requires Node.js as its runtime environment. Ubuntu 24.04 LTS offers several methods for Node.js installation, each with distinct advantages depending on your development needs.
Method 1: NodeSource Repository Installation (Recommended)
The NodeSource repository provides the most recent stable Node.js versions and receives regular updates. This method ensures optimal compatibility with Vue.js and modern JavaScript frameworks.
First, download and add the NodeSource GPG key:
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -Add the Node.js 20.x LTS repository to your system:
curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -Install Node.js from the newly added repository:
sudo apt install -y nodejsThis installation automatically includes npm (Node Package Manager), which is essential for managing JavaScript packages and dependencies.
Method 2: Ubuntu Default Repository
Ubuntu’s default repositories include Node.js packages, though they may not always contain the latest versions. This method offers simplicity but potentially limited functionality for cutting-edge development.
Install Node.js from Ubuntu repositories:
sudo apt install -y nodejs npmWhile convenient, this method may install older Node.js versions that lack compatibility with newer Vue.js features and security updates.
Method 3: Node Version Manager (NVM)
NVM allows installing and managing multiple Node.js versions simultaneously, providing flexibility for projects requiring different Node.js versions.
Download and install NVM:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bashReload your shell configuration:
source ~/.bashrcInstall the latest Node.js LTS version:
nvm install --lts
nvm use --ltsNVM enables easy switching between Node.js versions using simple commands, making it ideal for developers working on multiple projects with varying requirements.
Installation Verification
Regardless of your chosen installation method, verify Node.js and npm installation:
node --version
npm --versionSuccessful installation should display version numbers for both Node.js and npm. These versions should be compatible with Vue.js requirements for optimal development experience.
Vue CLI Installation and Setup
The Vue Command Line Interface (CLI) provides powerful tools for creating, developing, and building Vue.js applications. It streamlines project setup and offers extensive customization options for different development needs.
Global Vue CLI Installation
Install Vue CLI globally to access it from any directory on your system:
npm install -g @vue/cliGlobal installation makes the vue command available system-wide, enabling project creation from any location. The process downloads Vue CLI and its dependencies, which may take several minutes depending on your internet connection.
Alternative Package Managers
If you prefer Yarn over npm, first install Yarn globally:
npm install -g yarnThen install Vue CLI using Yarn:
yarn global add @vue/cliYarn often provides faster package installation and better dependency management, making it popular among professional developers.
Installation Verification
Confirm Vue CLI installation by checking its version:
vue --versionA successful installation displays the Vue CLI version number. If you encounter command not found errors, ensure your PATH environment variable includes npm’s global installation directory.
Vue CLI vs Create Vue
Vue CLI represents the traditional approach to Vue.js project creation, offering comprehensive features and extensive plugin ecosystem. However, the newer create-vue tool provides faster project initialization with Vite-based tooling.
For beginners and most development scenarios, Vue CLI remains the recommended choice due to its maturity, extensive documentation, and community support.
Keeping Vue CLI Updated
Regularly update Vue CLI to access new features and security improvements:
npm update -g @vue/cliStaying current with Vue CLI updates ensures compatibility with the latest Vue.js versions and development tools.
Creating Your First Vue.js Project
With Vue CLI installed, you can create professional Vue.js applications with sophisticated tooling and build processes. The project creation process offers extensive customization options to match your specific development requirements.
Basic Project Creation
Create a new Vue.js project using the interactive setup process:
vue create my-vue-projectReplace my-vue-project with your preferred project name. Use lowercase letters, numbers, and hyphens for compatibility across different operating systems and deployment platforms.
Configuration Options Deep Dive
Vue CLI presents several configuration options during project creation:
Default Preset Selection: Choose between Vue 3 default preset or Vue 2 default preset. Vue 3 offers improved performance, better TypeScript support, and modern JavaScript features, making it the recommended choice for new projects.
Manual Feature Selection: Advanced users can manually select specific features including:
- TypeScript Integration: Adds static typing for enhanced code quality and development experience
- Progressive Web App (PWA) Features: Enables offline functionality and native app-like behavior
- Router Configuration: Implements client-side routing for single-page applications
- Vuex State Management: Centralized state management for complex applications
- CSS Preprocessors: Support for Sass, Less, or Stylus for advanced styling capabilities
- Linting and Formatting: ESLint and Prettier integration for code quality enforcement
- Testing Frameworks: Unit testing with Jest or Mocha, end-to-end testing with Cypress
Project Structure Understanding
Vue CLI generates a well-organized project structure:
my-vue-project/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/
│ ├── App.vue
│ └── main.js
├── package.json
├── vue.config.js
└── README.mdSource Directory (src/): Contains your application code, including components, views, and assets. This directory structure promotes maintainable code organization and follows Vue.js best practices.
Public Directory (public/): Houses static files served directly by the web server. The index.html file serves as your application’s entry point and shouldn’t be modified unless necessary.
Configuration Files: package.json manages dependencies and scripts, while vue.config.js allows custom webpack configuration for advanced build customization.
Development Server Configuration
Vue CLI includes a powerful development server with hot module replacement, enabling efficient development workflows and real-time code updates.
Starting the Development Server
Navigate to your project directory and start the development server:
cd my-vue-project
npm run serveThe development server typically starts on port 8080, making your application accessible at http://localhost:8080. The console output provides the exact URL and additional information about your development environment.
Custom Server Configuration
Modify the development server configuration by creating or editing vue.config.js in your project root:
module.exports = {
devServer: {
port: 3000,
host: '0.0.0.0',
https: false,
open: true
}
}This configuration:
- Changes the default port to 3000
- Allows external network access
- Disables HTTPS for development
- Automatically opens the browser when starting
Hot Module Replacement Benefits
Hot Module Replacement (HMR) updates your application in real-time without losing component state. This feature dramatically improves development efficiency by preserving form data, scroll positions, and application state during code changes.
HMR works seamlessly with Vue.js single-file components, updating styles, templates, and logic independently without full page reloads.
Network Access Configuration
To access your development server from other devices on your network, configure the host setting to 0.0.0.0 and ensure your Ubuntu firewall allows incoming connections on the development port:
sudo ufw allow 8080This configuration enables testing your Vue.js application on mobile devices and other computers within your network.
Project Structure and File Organization
Understanding Vue.js project structure enhances development efficiency and code maintainability. Proper file organization follows established conventions that facilitate collaboration and long-term project success.
Root Directory Files
package.json: Defines project metadata, dependencies, and npm scripts. This file serves as your project’s configuration center, specifying Vue.js version, development dependencies, and build commands.
vue.config.js: Provides webpack configuration customization without ejecting from Vue CLI. Use this file for advanced build optimizations, proxy settings, and development server configuration.
.gitignore: Specifies files and directories excluded from version control. Default Vue CLI configuration appropriately excludes node_modules, build artifacts, and environment-specific files.
Source Directory Organization
Components Directory: Houses reusable Vue.js components following naming conventions like PascalCase for component files. Organize components by feature or functionality for larger applications.
Views Directory: Contains page-level components representing different application routes. These components typically compose smaller components and handle route-specific logic.
Assets Directory: Stores static assets like images, fonts, and stylesheets processed by webpack. Assets in this directory benefit from optimization and cache-busting during builds.
Configuration File Management
Babel Configuration: .babelrc or babel.config.js controls JavaScript transpilation for browser compatibility. Vue CLI provides sensible defaults while allowing customization for specific browser support requirements.
ESLint Configuration: .eslintrc.js defines code quality rules and formatting standards. Consistent linting improves code quality and team collaboration by enforcing uniform coding standards.
TypeScript Configuration: tsconfig.json configures TypeScript compilation when using TypeScript in Vue.js projects. Proper TypeScript configuration enhances development experience with better IDE support and compile-time error detection.
Production Build and Deployment
Preparing Vue.js applications for production involves optimization, minification, and proper web server configuration to ensure optimal performance and user experience.
Production Build Process
Generate optimized production builds using Vue CLI’s build command:
npm run buildThis process creates a dist/ directory containing minified HTML, CSS, and JavaScript files optimized for production deployment. The build process includes:
- JavaScript minification and compression
- CSS extraction and optimization
- Asset optimization and cache-busting
- Dead code elimination through tree shaking
Nginx Web Server Setup
Install and configure Nginx for serving Vue.js applications:
sudo apt install nginxCreate a virtual host configuration for your Vue.js application:
server {
listen 80;
server_name your-domain.com;
root /var/www/your-vue-app/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}This configuration:
- Serves static files from the dist directory
- Implements proper routing for single-page applications
- Sets appropriate caching headers for static assets
- Handles client-side routing fallback
SSL Certificate Configuration
Secure your Vue.js application with SSL/TLS encryption using Let’s Encrypt:
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.comSSL certificates provide encryption, improve SEO rankings, and meet modern browser security requirements.
Apache Alternative Setup
For Apache web server users, create a .htaccess file in your dist directory:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
# Enable compression
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>This configuration enables proper single-page application routing and gzip compression for improved performance.
Troubleshooting Common Issues
Vue.js installation and development can encounter various issues. Understanding common problems and their solutions saves development time and reduces frustration.
Permission and Access Issues
EACCES Permission Errors: When npm installations fail due to permission issues, avoid using sudo with npm. Instead, configure npm’s default directory:
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.profile
source ~/.profileThis approach prevents permission conflicts and maintains system security.
Port Already in Use: If your development server can’t start due to port conflicts, either kill the existing process or use a different port:
# Find and kill process using port 8080
sudo netstat -tlnp | grep :8080
sudo kill -9 <process-id>Node.js Version Conflicts
Incompatible Node.js Versions: Vue.js requires specific Node.js versions for optimal functionality. Use NVM to manage multiple Node.js versions:
nvm install 18.17.0
nvm use 18.17.0Check Vue.js documentation for current Node.js version requirements and compatibility information.
Network and Connectivity Issues
Package Download Failures: Slow or unreliable internet connections can cause package installation failures. Configure npm to use different registries or increase timeout values:
npm config set registry https://registry.npmjs.org/
npm config set timeout 60000Firewall Blocking Connections: Ubuntu’s UFW firewall might block development server access. Allow necessary ports:
sudo ufw allow 8080/tcp
sudo ufw reloadMemory and Performance Problems
Out of Memory Errors: Large Vue.js projects may exceed Node.js default memory limits. Increase memory allocation:
export NODE_OPTIONS="--max-old-space-size=4096"Add this export to your shell configuration file for permanent application.
Slow Build Performance: Optimize build performance by configuring webpack parallel processing and caching in vue.config.js:
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
}
}
},
chainWebpack: config => {
config.resolve.symlinks(false);
}
}Security Best Practices
Maintaining security throughout your Vue.js development environment protects your applications and development infrastructure from potential threats.
System-Level Security
Keep Ubuntu 24.04 LTS updated with latest security patches:
sudo apt update && sudo apt upgrade
sudo apt install unattended-upgrades
sudo dpkg-reconfigure unattended-upgradesConfigure automatic security updates to maintain system security without manual intervention.
Implement proper user management by creating dedicated development users with limited privileges:
sudo adduser developer
sudo usermod -aG sudo developerNode.js and npm Security
Regularly audit npm packages for known vulnerabilities:
npm audit
npm audit fixUse npm’s security audit feature to identify and resolve security issues in your project dependencies.
Configure npm to avoid running scripts as root:
npm config set unsafe-perm falseApplication Security Measures
Implement environment variable management for sensitive configuration data:
# Create .env file for development secrets
echo "VUE_APP_API_KEY=your-secret-key" > .env.localAdd .env.local to your .gitignore file to prevent committing sensitive information to version control.
Use Content Security Policy (CSP) headers in your web server configuration to prevent XSS attacks:
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'";Performance Optimization and Advanced Configuration
Optimizing Vue.js applications ensures fast loading times, smooth user interactions, and efficient resource utilization across different devices and network conditions.
Build Optimization Strategies
Configure webpack optimization in vue.config.js for improved build performance:
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
}
}This configuration separates vendor libraries from application code, enabling better caching strategies and faster subsequent page loads.
Runtime Performance Enhancement
Implement code splitting and lazy loading for improved initial load times:
// Router configuration with lazy loading
const routes = [
{
path: '/about',
component: () => import('@/views/About.vue')
}
]Lazy loading loads components only when needed, reducing initial bundle size and improving application startup performance.
Server Optimization
Configure Nginx for optimal Vue.js application serving:
# Enable gzip compression
gzip on;
gzip_vary on;
gzip_types text/css application/javascript image/svg+xml;
# Set proper cache headers
location ~* \.(js|css)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}Proper server configuration significantly impacts application performance and user experience.
Monitoring and Analytics
Implement performance monitoring to identify optimization opportunities:
// Vue.js performance monitoring
import { createApp } from 'vue'
const app = createApp(App)
app.config.performance = true
app.mount('#app')Enable Vue.js performance monitoring in development to identify components causing performance bottlenecks.
Advanced Topics and Next Steps
Advancing beyond basic Vue.js installation opens opportunities for sophisticated development workflows and professional application deployment.
Development Workflow Enhancement
Configure Visual Studio Code or your preferred IDE with Vue.js extensions for enhanced development experience:
- Vetur or Volar for Vue.js syntax highlighting and IntelliSense
- ESLint extension for real-time code quality feedback
- Prettier for automatic code formatting
- GitLens for advanced Git integration
Testing Implementation
Implement comprehensive testing strategies for reliable Vue.js applications:
# Add testing dependencies
npm install --save-dev @vue/test-utils jestCreate unit tests for Vue.js components to ensure functionality and prevent regressions during development.
Integration Possibilities
Explore Vue.js integration with backend technologies:
- Express.js for Node.js backend development
- Laravel for PHP-based APIs
- Django or Flask for Python backends
- Database integration with MongoDB, PostgreSQL, or MySQL
Containerization with Docker
Package Vue.js applications using Docker for consistent deployment across environments:
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD ["npm", "run", "serve"]Docker containers ensure consistent application behavior across development, staging, and production environments.
Congratulations! You have successfully installed Vue.js. Thanks for using this tutorial for installing the Vue.js progressive JavaScript framework on Ubuntu 24.04 LTS system. For additional help or useful information, we recommend you check the official Vue.js website.
