Introduction
You will gain the fundamental skills necessary to begin developing decentralized web applications with Vue in this course. You will first learn the benefits of utilizing Vue. We will install the VUE CLI, and how to create and run your app using the Vue CLI. We’ll examine the compatibility of VUE.Js with the Celo blockchain through Web3.js. After completing this course, you will be familiar with all the fundamentals required to create your own Vue applications on Celo.
Prerequisites
This tutorial assumes basic familiarity with HTML, CSS, and JavaScript. It might not be the greatest idea to dive directly into a framework if you are brand-new to frontend programming; instead, learn the fundamentals and then return! Although it is helpful, prior knowledge of other frameworks is not necessary.
Requirements
We’ll need a code editor in this tutorial. I used Visual Studio Code (I highly recommend it). Install it from [HERE]
Getting started with VUE
Vue (pronounced /vju:/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.
Before we get into it, I’d like to remind you of some of the benefits of utilizing VUE js
-
Simple: The single-file component-based architecture built on HTML, CSS, and JavaScript is one of the main advantages of Vue JS. Because each component of the app can be independently tested and the coding is simple to grasp, this makes life easier for developers. In turn, this makes it simple to optimize and spot any errors.
-
A useful range of tools: Despite its small size, the Vue framework is incredibly well-equipped with a wide range of utilities that improve its usability. For instance, Vue CLI is a widely used npm package that makes it simple to construct a new project right away using Vue Create. The GUI is also crucial for the rapid development, management, and production of projects.
-
Lightweight: Although it may sound unbelievable, the Vue framework is only about 20 Kb in size. There is no waiting while it downloads and installs, and it takes up absolutely no space.
-
Integrates with other frameworks: There is no obstacle to switching to Vue if you are already using an alternative like Angular or React. It is simple to integrate with these and other frameworks, and it may be tailored to fit your UI project.
-
Speed and performance: Today, browsing and other online tasks are done primarily on mobile devices. More than ever, users are impatient with slow-loading websites and mobile applications. The best user experience is combined with the fastest performance available with Vue.
-
Flexible coding: Vue utilizes fewer plug-ins than competing frameworks by design. For software developers who are used to having these tools available, that can be a bit of a cultural shock.
-
No steep learning curve: Keeping with the simple philosophy, anyone who is familiar with HTML, CSS, and JavaScript can learn Vue.js and use it right away. There is nothing difficult to understand, and even novice programmers may provide the best results with the fewest lines of code.
-
Incrementally adoptable: When compared to other frameworks, Vue incrementally adds more markup to the HTML code, adapting to the developer’s needs while other frameworks demand that the developer completely rewrite an existing application
Vue shouldn’t be ruled out if you want to create decentralized web applications because it makes them more responsive and gives them a desktop app feel.
Let’s create and run an app using the Vue CLI(Command Line Interface)
The VUE CLI is an npm package that is installed globally and gives you access to the vue command in your terminal. By using vue to create, it offers the capability to quickly scaffold a new project. Additionally, you can use the vue ui to manage your projects through a graphical user interface.
Step 1: Install Node.js
Simply run this command in your terminal to get node or you can download it from the official Node.js website: https://nodejs.org (Make sure to get the LTS version for your Operating system)
sudo apt-get install nodejs
Hit Y when you reach the “Do you want to continue part” and it will install
Let’s confirm node is actually installed by hitting this command below. If the Node version shows, then you have successfully installed node
node -v
My version here is v12.22.12 confirming I have successfully installed node.
Step 2: Install Vue CLI
npm install -g @vue/cli
OR
yarn global add @vue/cli
A few seconds will pass before the installation is finished.
If it says that you do not have permission, just run the command again by adding sudo in front of it like so, which will ask you to enter your admin password, and then you will be all set.
sudo npm install -g @vue/cli
If you’ve already installed vue cli, you can check the version using the following command.
vue --version
If you have a version lower than 4.5, you can simply upgrade it by running the command below.
npm upgrade --next
Step 3: Create a new Vue project
After installing Vue CLI, you can start a new Vue project. Use the cd command to move to the directory where you want to create your project, then issue the following command:
vue create my-celo-dapp
Replace “my-celo-dapp” with the desired name of your project. This command will prompt you to select a preset. You can choose the default preset or manually select features as per your requirements.
When prompted to choose which version of Vue you want to use, choose version 3 by moving the arrow key up and down on the keyboard and pressing enter.
Step 4: Run the Vue app
As you can see, my terminal window gives me two commands to run the project.
The first command is to go into the project folder:
CD my-celo-dapp
To run the app, run the following command
npm run dev
All I have to do is run the npm run serve command.
Which will start running the server on my computer and give me the localhost URL.
npm run serve
This command will start a development server, and you should see an output with the URL where your app is running (e.g., http://localhost:8080).
As you can see, I get two: one is localhost and the other one is the Network URL which is great when you want to see the project on multiple devices such as checking the project UI on your mobile phone.
Open up the browser and copy the Network URL and paste it there.
VUE.JS and Celo blockchain
Vue.js, being a JavaScript framework, can interact with the Celo blockchain through web3.js, which is a JavaScript library for interacting with Ethereum-based blockchains.
To integrate Celo blockchain functionality into a Vue.js app, you would follow these steps:
- Install web3.js: Begin by installing web3.js in your Vue.js project. Open your terminal or command prompt, navigate to your project directory, and run the following command:
npm install web3
- Import web3.js: In your Vue.js component where you want to interact with the Celo blockchain, import the web3.js library:
import Web3 from 'web3';
- Initialize web3.js: Initialize web3.js by creating an instance of the
Web3class. You need to provide the RPC endpoint of the Celo blockchain you want to connect to:
const web3 = new Web3('https://<celo-rpc-endpoint>');
Replace <celo-rpc-endpoint> with the actual RPC endpoint of the Celo blockchain you want to use. This endpoint allows your app to communicate with the blockchain network.
- Connect to the Celo blockchain: Connect to the Celo blockchain by checking if the user has a compatible web3 provider (such as MetaMask) available:
if (window.ethereum) {
// User has MetaMask installed
const provider = window.ethereum;
try {
await provider.request({ method: 'eth_requestAccounts' });
web3.setProvider(provider);
console.log('Connected to Celo blockchain');
} catch (error) {
console.error('Failed to connect to Celo blockchain', error);
}
} else {
console.error('Please install MetaMask to connect to Celo blockchain');
}
This code checks if the user has MetaMask installed and requests permission to access the user’s accounts on the Celo blockchain.
- Interact with the Celo blockchain: With web3.js initialized and connected to the Celo blockchain, you can now use its methods to interact with the blockchain. For example, you can retrieve an account’s balance:
const balance = await web3.eth.getBalance('<celo-address>');
console.log('Account balance:', balance);
Replace <celo-address> with the actual Celo address for which you want to retrieve the balance.
These are the basic steps to integrate Celo blockchain functionality into a Vue.js app using web3.js.
Conclusion
Well done on creating your first Celo vue dapp. We covered some benefits of using Vue to build your decentralized Vue application. We learned how to install and run a Vue application and also how to interact with the Celo blockchain through web3.js.We also learned how to install web3.js and use
Next steps
Learn to get familiar with Vue CLI and its single-file components. How to work with templates and Vue components. I’ll cover them and more in greater detail in my next tutorial, which will be in path form.
About the Author
Gideon Nutekpor Yaw