A walk-through of how to deploy Vue using the ready made Vue Vite Blocklet and ABT Node.

Introduction

In this demo, we will show you how to quickly deploy Vue Vite using a ready-made Blocklet and ABT Node. Similar to other Blocklets, ABT Node is an adaptable developer platform that enables developers to easily build their projects using their preferred frameworks including ReactJS, Express and of course Vue. The Vue Vite Blocklet includes everything you need to quickly deploy and start coding using Vue with integrated tools to easily add decentralized identity, blockchains and more.

vue intro

What is Vue Vite

For those who don't know, Vue is a progressive framework to easily build user interfaces and is designed to be incrementally adopted (similar to adding Blocklets for what you need). In this demo, we have combined Vue with Vite, a lightening fast cold server that offers instant hot modules and true on-demand compilation. Vite offers a no-bundler dev setup that allows you to develop Vue apps with Single-File Components without any bundling during development. Interestingly enough, Vite not only works with VueJS, but can be used by other libraries like ReactJS.

Deploy Vue + Vite on ABT Node

To get started with Vue Vite and ABT Node simply visit the Blocklet Github page - https://www.github.com/blocklet - and select the Vue + Vite Blocklet.

vue github

Click on Open in Gitpod

Select the option to Open in Gitpod to start the Cloud IDE and to launch the Vue Vite Blocklet on ABT Node. Note, we've partnered with Gitpod to enable developers to quickly start coding, building and debuging their applications and projects entirely in the cloud using ArcBlock's ABT Node.

vue start 1

Automatically Deploys Vue and ABT Node

As the screenshot indicates, the ABT Node Daemon has launched and will deploy ABT Node in Debug mode so you can immediately begin playing with the code, as well as access ABT Node's dashboard and a preview of the Vue on the web.

vue node start

ABT Node is Now Running

We can see now that the dev server is running locally in the cloud and services like NGINX have been deployed automatically.

vue node running

Accessible URLs are now available including a link to access the ABT Node dashboard and Vue in our browser.

vue node url

Preview Vue Vite and start coding

At this point, Vue is running on ABT Node in the cloud and a developer can access the source files and begin editing the code for their project.

vue running

Try Vue + Vite Now

Now, it's your turn to get started. Click on this link to start the Cloud IDE launch the Vue Blocklet on ABT Node.

Deploy to ABT Node

If you are a developer and ready to get started with Vue on your ABT Node environment, return to Github and you can select Install on ABT Node to install any Blocklet directly into your dev environment. Simply follow the steps to complete the install.