vno 1.5: a Vue build tool with powerful new features
the first build tool for creating, compiling and bundling Vue projects in a Deno runtime environment
Imagine the process of setting up a traditional single-page application — wrestling with webpack, setting up additional config files, installing dependencies and testing libraries — you can spend hours before you even get to the boilerplate code or defining components! This can be frustrating for developers of all skill levels, who’d rather focus their energy on solving the hard, heady problems — not running yet another ‘npm install’ to see why a slight change in package versions is crashing the entire app before it even spins up for the first time.
On top of all that, there are more questions to answer. What framework do you want to use? Why? Have you really considered the benefits of React? What if you wanted to get exposure to that other framework? And, on that note, what about your runtime environment? You might be familiar with node.js — are you sure it’s the best for this project? What about that other runtime you read about, five Medium articles ago? What if this time you shook up your well-respected tech stack and tried something new?
These questions can be overwhelming. The desire to start coding now is just too much for you to sort through even more questions. What if there was a build tool that helped you not only find the answers, but did all of the setup for that new runtime, that new framework, cutting your development time in half?
👋 Introducing vno 1.5
vno is the first native build tool for compiling and bundling Vue single-file components in a Deno runtime. Since its introduction in early 2021, vno has become a useful tool for developers looking to quickly set up new Vue.js applications while utilizing many of the benefits, security and simplicity of the Deno runtime. vno takes some of the most powerful Deno features — its simple setup (one executable file), increased security features and built-in Typescript support — and adds the incremental, progressive scalability found in Vue.js.
vno gives developers, regardless of experience level, an easy-to-understand, simple yet performant build tool, compiler and bundler all in one into a lightweight, efficient CLI. vno makes it simpler than ever to get started with a new project using Vue syntax in a Deno runtime.
🆕 New features in vno
vno 1.5 allows developers to choose between Vue 2 and Vue 3 syntax after running the vno create command. Developers can leverage Vue 3’s composition API for better built-in Typescript support out of the box. Vue 3 also has increased rendering speeds, relying on a completely rebuilt virtual DOM for faster mounting, patching and tree-shaking capabilities. If developers are more comfortable with Vue 2 syntax, vno provides this option as well.
vno now offers the ability to implement Vue Router, one of the most popular Vue libraries, into single-page applications with a simple ‘Use Vue Router?’ option during the vno create process. vno already understands routing for pages generated with SSG, but incorporating Vue Router gives more options to developers setting up their initial boilerplate code. Vue Router was developed by the Vue community to be flexible and, like the rest of the Vue ecosystem, incrementally adoptable. It’s shockingly fast and responsive, simple to use for common case setups but also customizable for more complex projects.
It’s also even easier since we’re building our new application in Deno — again, there’s no webpack setup or dependency installation. Deno imports the modules as needed directly on each file. By answering ‘yes’ to ‘Use Vue Router?’ in vno’s project setup, you’ve established parent and child components, imported Vue Router and created basic page routing, all with a simple input on the command line.
Just as a reminder, vno was a potent tool before these new features. vno’s static site generation allows you to swiftly spin up pre-rendered pages at build time with zero additional configuration. Additionally, vno’s live reload provides a fast, reliable DX. vno also supports both component-level and global CSS stylesheets.
These new updates move vno forward, making a useful build tool even more so.
🏁 How to get started with vno
You can follow along with the instructions on our GitHub page to create new projects in vno.
🚘 How does vno work under the hood?
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. vno 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. 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 both a build.js file and a style.css file. Once the build is complete, the build.js and style.css will need to be linked into the server and referenced inside index.html. Upon initializing the server, it is clear how vno has adapted Vue files to be served via Deno to the browser.
🔧 How does vno’s ‘Add Vue Router’ work?
Let’s take a deeper look at vno’s ability to include Vue Router into your SPA. vno takes out many of the steps involved to set up this popular routing library.
After selecting to use Vue Router in the project creation prompts, vno populates the parent and child components of your application and creates a new index.js in the 📁/router folder within your project. Because there’s no need to install dependencies via a separate package manager, vno simply imports the router at the top of the page using Deno’s import modules using browser-like module resolution. Deno caches these imports, reducing the overall file size and response time.
vno defines routes for each of your created components, then initializes a new instance of Vue Router within the /router/index.js file and exports it for use within the application.
On the parent component page, vno also creates a <router-view /> instance. <router-view /> is a functional component that renders the matched component for the given path. Finally, the router instance is exported and mounted to the parent component, passing functionality to the entire SPA.
💻 What’s next and how to contribute
We hope to incorporate more features into vno soon, including support for scoped CSS styling, as well as incorporating other popular Vue libraries like Vuex. vno is the only build tool of its kind for building Vue applications in a Deno runtime and there’s still so much more we can add.
Open-source software is best when there’s a plurality of voices in the room — we’d love to hear your comments, complaints, requested features and more on our GitHub page or check out our website at vno.land.
Team vno is:
Edwin Lee // linkedin / github
Kaeny Ito-Cole // linkedin || github
Michael Ross // linkedin || github
Josh Cretella // linkedin || github
