If you’re looking to get started with Vue.js on Ubuntu 22.04, you’re in the right place! Whether you’re a seasoned developer or just dipping your toes into the world of JavaScript frameworks, installing Vue.js on your Ubuntu 22.04 system is a breeze. In this guide, we’ll walk you through the steps to get Vue.js up and running, so you can start building dynamic, reactive web applications in no time. Let’s dive in and set up your development environment for Vue.js!
To start, make sure you’ve created a VPSie account if you haven’t already. Next, proceed by deploying an Ubuntu 22.04 server configured to meet your specific needs.
Once the server is deployed, SSH into the command line interface. Before installing any packages, it’s essential to update your Ubuntu operating system to ensure all existing packages are up to date. Open a terminal and run the following command:
sudo apt-get update -y
Install Node.js and Vue CLI
Install Node.js and Vue CLI
Before installing Vue.js, we need to ensure that our system has some essential tools and utilities. These packages help us to download, manage, and handle various tasks during the installation and development process. The following command installs three important packages:
sudo apt install curl git wget -y
Set up the NodeSource repository for Node.js on your Debian-based system. This repository provides the latest Long Term Support (LTS) version of Node.js, ensuring that you have access to the most stable and secure releases.
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
Once the repository has been added, you can install Node.js using the following command:
apt install nodejs -y
Verify the installation:
node --version
To update NPM to the latest version, use the following command:
npm install npm@latest -g
You can verify the NPM version:
npm --version
Once Node.js and npm are installed, you can install Vue CLI globally using npm.
sudo npm install -g @vue/cli
Verify the installation:
vue --version
That’s it! You now have Vue CLI installed on Debian 12.
Create a New Vue Project
Create a new Vue project by running the following command:
vue create my-vue-app
You will be prompted to select the Vue version and features. You can choose the default option by selecting “Default ([Vue 3] babel, eslint)” or manually select the features you need by choosing “Manually select features”.
Here’s a quick breakdown of the options:
- Default ([Vue 3] babel, eslint) Recommended: Sets up a project with Vue 3, Babel, and ESLint.
- Manually select features: Allows you to choose additional features like TypeScript, Router, Vuex, CSS Pre-processors, Linter/Formatter, Unit Testing, and E2E Testing.
Change into the project directory:
cd my-vue-app
Once your project is set up, you’ll find a few files and folders. The main component that is rendered by default is App.vue. We will modify this file to display “Hello, VPSie!”.
1. Open src/App.vue in your text editor.
nano src/App.vue
2. Replace the content of App.vue with the following code:
<template>
<div id="app">
<h1>Hello, Vue!</h1>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style scoped>
h1 {
color: orange;
text-align: center;
margin-top: 50px;
}
</style>
Make sure the development server is running, run the following command to run your project:
npm run serve
Your app will be available at http://{localhost/server_ip}:8080.
And that’s it! You’ve successfully installed Vue.js on Ubuntu 22.04. Now you’re ready to start building awesome apps with Vue. If you run into any issues or have questions, don’t hesitate to reach out. Happy coding! 🚀
