Using vno to configure a Vue app

Before now, it was impossible to configure a Vue.js application using Deno. But now, that’s changed recently, thanks to the introduction of vno.

In this article, I’ll explain what vno is, the powerful features it offers, how to install Deno, and how to configure a new Vue app using vno.

What is vno?

According to one of vno’s creators, Andrew Rehrig, “Vno is a parser, compiler, and bundler and can be easily accessed through an integrated CLI tool that will either create an entire project from scratch, including an example file structure and components or optimize an existing Vue project with a few simple commands.”

Unlike Vue CLI, which uses Node.js and its packages (Node modules) to configure and bundle your Vue application, vno sets to bring this same experience of Vue CLI to Deno.

Don’t know what Deno is? Check out this friendly introduction.

Pros of using vno

• Faster development cycle: Creating a new vue application with vno is faster compared to Vue CLI, as there are fewer dependencies required to build your app
• No node_modules: Because vno is built on top of Deno, so there is no need to worry about the relatively large node_module folder that’s usually present in projects scaffolded with Node.js.
• Easily configurable: vno is pre-built with a configuration file (vno.config.js), which you can easily use to adjust options like your server file, preferred port number, project title, etc.
• More secure: vno is built with Deno (whose ultimate focus is on security), meaning your project has no default access to the execution of other scripts, your file system, and your network

Cons of using vno

• No HR support: vno does not currently support hot reloading. If there are any new changes in your app, you’ll have to restart the project in your terminal/CMD and reload the page on your browser
• No server-side support: Currently, vno does not support building server-side applications (SSR), but this is an aspect the vno team is planning to work on in the future
• No scoped styling: Scoped CSS styling is still in development and is not currently supported.

Prerequisites to configuring your app with vno

This tutorial assumes the following prerequisites:

• Vue
• Command-line interface (CLI)
• Deno

Project Set-up

Installing Deno

The first required step is to install Deno, and we can do this easily with scoop by running:

scoop install deno

Once this is completed, run deno -V. If the installation was successful, you should see the version of Deno you’d put into your console/command line, like below:

Note: Installing vno requires Deno version 1.7 or above. If you’ve installed a former version of Deno, you can update to the latest version by running:

deno upgrade

Installing vno

The latest stable version of vno by can be installed by running:

deno install --allow-net --unstable -f -n vno https://deno.land/x/vno/install/vno.ts

Once this process is completed, you should see an output asking you to add .deno\bin to PATH, along with the command to do so (this command varies, depending on your device operating system). To do this on a Windows system, run:

set PATH=%PATH%;C:\Users\<PC-Username>\.deno\bin

Creating our first vno app

Similar to Vue CLI, creating a new application is as easy as running:

vno create new-app

Once this process is completed, let’s CD into our new app directory and serve the app:

cd new-app
vno run dev

You should see something like this:

After visiting http://localhost:3000, you should see the following page rendered on your browser:

vno directory structure

• components: Similar to Vue CLI, this directory should contain all your application components
• public: The public directory contains an index.html file where your built files will be automatically injected
• vno-build: This directory is automatically generated anytime you run/re-run the vno run dev or vno build command
• App.vue: Similar to Vue CLI, the App.vue file serves as your app entry point.
• vno.config.json: If you’re looking to configure your app further, you can achieve it by editing this file. Here, you can easily modify your preferred port, specify your app entry point, e.t.c.

Building your vno app

Building your vno app is simple and fast. First, run the following command:

vno build

This command will generate a new vno-build folder, which would usually contain a build.js and style.css file.

Once these files are generated, create a new index.html file that links the build.js and style.css together, like below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>your project</title>
  </head>
  <body>
    <div id="app">
      <!-- built files will be auto injected -->
    </div>
    <script type="module" src="./build.js"></script>
  </body>
</html>

Now that the build files are linked together, you can go ahead to run the index.html file. You should see the same output as when we were running our app via the dev server.

vno’s parsing process

When you run the vno build command, vno recursively walks through your file structure, locates all .vue files, and begins the parsing process. During this process, individual components are isolated and saved, and all necessary connections between each file are accounted for so that any error that might occur during the build process will be in proper order.

vno as an API

It is also possible to integrate vno in your application without installing the vno CLI.

You can import vno into your application with a URL like:

import { Factory } from 'https://deno.land/x/vno/dist/mod.ts';
const vno = new Factory();
await vno.build();

If you have your vno.config.js file already set up, the API will automatically search for it and apply it to your application. But without a vno.config.js file, you can input the object directly into the Factory instance, like below:

import { Factory } from 'https://deno.land/x/vno/dist/mod.ts';

const vno = Factory.create({
  root: "App",
  entry: "./"
  vue: 3,
  options: {
    port: 3000
  }
})
await vno.build();

The vno.build() method is the same as the vno build command, as it will also perform a build on the entire application and compile it to a vno-build directory as one javascript file and one CSS file.

Conclusion

In this article, I introduced you to the world of vno and Deno and showed you how to scaffold a new Vue application using vno.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - Start monitoring for free.