How to Install Vue.js on Ubuntu 22.04

Vue.js is a popular JavaScript framework for building user interfaces and single-page applications. This guide will walk you through the steps to install Vue.js on Ubuntu 22.04, using root privileges. We’ll cover everything from setting up Node.js, which is required to run Vue.js, to installing the Vue CLI and creating a new Vue.js project. This guide is designed to be easy to understand, even for newcomers.

Step 1: Initiating Instance Creation

• Creating a New Instance
  • To create a new instance, click on the blue “Create” button located in the top-right corner of the page.
  • Select “Add New Instance” to begin setting up a new virtual machine.

Step 2: Choosing a Location

• Select a Data Center
  • On the “Create New Instance” page, choose your preferred data center location. For example, you might select “Amsterdam, Netherlands”.

Step 3: Selecting a Plan

• Choose a Plan
  • Pick a plan that meets your requirements. Options vary in specifications and price, from $3.5 to $22 per month, offering different CPU, memory, storage, and bandwidth.
• Choose an Operating System
  • Scroll to the “Choose an image” section and select Ubuntu 22.04 from the list of available distributions.

Step 4: Authentication Method

• Select an Authentication Method
  • Choose between SSH keys (recommended for better security) or a password for root access. In this guide, we’ll proceed with the password option.
• Complete Instance Creation
  • Click the “Create Instance” button at the bottom of the page to finalize the setup.

Step 5: Connecting to Your Instance

• Retrieve SSH Credentials
  • Note the IP address of your newly created instance from the Shape.host dashboard.
• Connect via SSH
• Open a terminal on your local machine and use the following command to connect to your instance:

ssh root@your_instance_ip

• Replace your_instance_ip with the actual IP address of your instance.

Before we begin, ensure you have:

1. A server running Ubuntu 22.04.
2. Root access to the server.
3. Basic knowledge of the terminal.

Step 6: Update Your System

First, it’s essential to update your system packages to their latest versions.

apt update && apt upgrade -y

Step 7: Install Node.js

Vue.js requires Node.js. We’ll use the NodeSource repository to install the latest stable version of Node.js.

1. Add the NodeSource repository:

curl -fsSL https://deb.nodesource.com/setup_20.x | bash - 

1. Install Node.js:

apt install -y nodejs

1. Verify the installation:

node -v
npm -v

You should see the versions of Node.js and npm (Node Package Manager) displayed.

Step 8: Install Vue CLI

The Vue Command Line Interface (CLI) is a powerful tool for scaffolding and managing Vue.js projects. We’ll install it globally using npm.

npm install -g @vue/cli

Verify the installation:

vue --version

You should see the version of Vue CLI displayed.

Step 9: Create a New Vue.js Project

Now that we have Vue CLI installed, we can use it to create a new Vue.js project.

1. Navigate to the directory where you want to create your project. For example, let’s create it in the /opt directory:

cd /opt

1. Create a new Vue.js project. Replace my-vue-project with your desired project name:

vue create my-vue-project

1. You will be prompted to choose a preset. For beginners, the default preset is a good choice. Use the arrow keys to select the default preset and press Enter.
2. Navigate to your project directory:

cd my-vue-project

1. Start the development server:

npm run serve

You should see output indicating that the development server is running. By default, the server runs on port 8080.

Step 10: Access Your Vue.js Application

Open your web browser and navigate to http://your_server_ip:8080. You should see the default Vue.js welcome page, indicating that your Vue.js application is up and running.

Step 11: Additional Configuration

Setting Up a Production Build

To prepare your Vue.js application for production, you’ll need to build it. This will create optimized and minified files that you can deploy to a web server.

1. In your project directory, run the build command:

npm run build

1. This will create a dist directory containing your production-ready files. You can then serve these files using a web server like Nginx or Apache.

Example: Setting Up Nginx to Serve Your Vue.js Application

1. Install Nginx:

apt install -y nginx

1. Configure Nginx to serve your Vue.js application. Open the Nginx default configuration file:

nano /etc/nginx/sites-available/default

1. Replace the contents with the following configuration. Adjust the paths as necessary:

server {
    listen 80;

    server_name your_domain_or_IP;

    location / {
        root /opt/my-vue-project/dist;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

1. Save and close the file.
2. Test the Nginx configuration:

nginx -t

1. Restart Nginx:

systemctl restart nginx

1. Start the Vue.js development server again:

cd /opt/my-vue-project
npm run serve

Your Vue.js application should now be accessible at http://your_domain_or_IP.

For hosting Vue.js applications, consider using Shape.host’s Cloud VPS services. Shape.host provides robust and scalable cloud solutions tailored for various needs, ensuring high performance and reliability for your Vue.js application. With their Cloud VPS, you can easily scale resources as your application grows, providing an optimal user experience.