A new Deno module, called ‘Vno’, was released earlier this year. It’s a third-party module that runs Vue components in the Deno environment.
In this blog, we will get a quick go-through of this module. Let’s get going-
All About Vno -
The first build tool for compiling and bundling Vue components in a Deno runtime environment.
Vno is a third-party module for Deno (an alternative to node.js) that brings together two different technologies, i.e., Vue and Deno.
Deno is a runtime environment, released recently, which improves the shortcomings of Node.js and offers a better alternative.
The idea behind creating Vno was to leverage the Vue.js framework in Deno runtime. As there was no such tool available at that time, the team Vno decided to build their own.
Along with using Vue.js classes, developers can also leverage the simplicity rendered by Deno. With a rich and exciting ecosystem, the Vno framework renders remarkable flexibility and can be used as-
- Adapter
- Bundler
- Compiler
- Parse
- Server-side Renderer
It parses the Vue.js component files and compiles them, in Deno runtime, into bundles of JavaScript files that can be read and rendered by the browser.
Getting Started
Installation:
Those who have a pre-built Vue application can simply install vno locally -
deno install — allow-read — allow-write — allow-run — allow-net — unstable -f -n vno https://deno.land/x/vno/dist/mod.ts
Then, you can create a vno.config.json file that specifies the name and relative path of the root Vue component inside the root directory and run the vno build, which then creates build.js and style.css files inside vuo-build folder.
Those who prefer not to install Vno locally can import it from deno.land into your project -
import vno from http://deno.land/x/vno/dist/mod.ts
Creating a New Project:
To initiate a new vno project -
vno create
To set up and flash out a file tree -
vno create <project-name>
Build Process:
To create a bundled JavaScript file -
vno build
Once you run vno create, you can initialize the parsing process by using vno build. As long as you provide a vno.config.json file, you need not use the vno create method.
Development:
To utilize development server -
vno run dev
This command speeds up the load time and connects components to a pre-built server preventing the need for a multi-step manual rebuild every time a change has occurred and facilitating the changes made to the components reflected quickly in the browser.
To run the server -
vno run server
Configuration:
Call the config method inside your server -
vno.config({root:’App’, entry:’./path’})
How Vno Works?
The Vno module provides the equivalent of a create-vue app through simple CLI commands and vno create lowers the barrier of entry for builders if they want to use Vue in Deno environment which has been restrained by the incompatibility and newness of the two technologies.
During the parsing process, Vno isolates and stores the individual tags of all .vue components and acknowledges all the necessary connections between the files so that the build occurs in an appropriate order.
After completion of vno build, a vno-build folder gets created which contains a build.js and a style.css file. Once the build gets completed, these files are linked to the server and referenced inside the index.html file.
This was a short introduction to vno, you can learn more about it over here.
Thanks for reading this blog!! Stay tuned for more blogs.