vno: a vue / deno love story
By: Andrew Rehrig
Tags: Vno, Vue, Build Tools, Deno, Integration

Recently, a production level release of Deno emerged onto the development landscape as an alternative to Node.js and has been steadily gaining popularity ever since. Deno is a secure-by-default runtime environment that aims to simplify many of the operations formerly outsourced to node modules. Similarly, Vue has been gaining ground on both React and Angular since its release in 2014, with a lot of developers excited about its flexibility and ease of use.

However, for developers who are equally as excited by Deno as they are by Vue, there has not previously been a way to work with Vue in the Deno runtime. Until now.

________________________________

Enter vno

As the first build tool for compilation and bundling of Vue single-file components in a Deno runtime, vno allows a user to employ the elegance and functionality afforded by developing with Vue while offering the security and simplicity of Deno.

How does vno work?

At its core vno is an adapter that will parse a Vue component file (or files) and compile and bundle it into a Javascript file to be read and rendered by the browser. A thorough explanation of the process can be found in the vno documentation.

The vno module offers the equivalent of a create-vue app through the use of a few simple CLI commands. Although vno can easily be utilized without this functionality, vno create serves to lower the barrier to entry for those wanting to work with Vue in a Deno environment but were formerly held back by the newness of both technologies and their incompatibility.

When given a relative path to the root component, vno will recursively walk through the file structure, find all .vue files, and begin the parsing process. During the parse operation each component’s individual tags are isolated and stored and all necessary connections between files are accounted for so that the build occurs in the proper order.

Upon successful completion of a vno build , a user will see a vno-build folder created and populated with a build.js file and a style.css file. It is important to note that as of this writing, scoped css styling is still in development and is not currently supported. For best results, it is recommended that every aspect of a component that may require individual styling be given a unique identifier tag.

Once the build is complete, the build.js and style.css will need to be linked into the server and referenced inside the index.html file. Upon initializing the server, it is clear how vno has adapted Vue files to be served via Deno to the browser, which, until the introduction of vno, was not possible.

Utilizing the CLI

The CLI and its associated documentation can all be found at the vno repository on github. In order to run vno, the linked mod.ts file will need to be installed locally. In the terminal deno install the mod.ts , making sure to name it using the -n flag (vno is strongly suggested).

install vno locally with the link to the hosted mod.ts

Upon successful completion of the install, the executable needs to be run in order to provide the path to the terminal. Once this is complete, vno will be installed into the local directory and will be accessible via the vno keyword.

vno create to initialize a new vno project

export the path and run vno create

In order to set up a project and flesh out a file tree, run vno create <project-name> . The terminal will respond with prompts for customization if desired, and if no customization is required will auto-populate using defaults. Choosing the default options will result in a file tree containing a root Vue component entitled App.vue , a components directory entitled “components” containing a child component HelloVno.vue , a public folder containing an index.html .

vno build to create a bundled Javascript file

Now that a basic template has been created, the build can be instantiated. Entering vno build into the terminal will read the vno.config.json file and initiate the parse through all components (in the case of this example, App and HelloVno), link them, and write that information into two files which will show up inside a vno-build directory. Opening the resultant build.js file will show the template and style tags from all components transformed into a string and correctly formatted for processing by the browser. Inside the style.css will be the styling for all components.

The vno build process will traverse and link all .vue components so that when they are bundled and delivered they are written in the proper order to ensure that any component that relies on another is available at runtime.

vno run dev to utilize development server

In order to facilitate development while running Deno, the vno run dev command will speed the load time and prevent a multi-step manual rebuild by connecting components to a basic, pre-built server thus allowing for changes made to components to be more quickly reflected in the browser.

Using vno as a stand-alone module

Users with a prebuilt Vue application or who prefer not to employ the create-vue functionality of the CLI can simply follow the install instructions above to install vno locally, then create a vno.config.json file to specify the name and relative path of the root Vue component inside the root directory, and then run vno build from the root directory. This will create a bundled build.js and style.css located inside the vno-build folder. Simply make sure these are referenced in the appropriate places in the server and in the index.html .

By placing a server property into the vno.config.json with the value of the path to the server from the root, the server can be accessed and initiated without having to do a manual rebuild by using vno run server .

vno.config.json

vno run server to run the server