BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News New Deno Module Builds and Compiles Vue Applications

New Deno Module Builds and Compiles Vue Applications

This item in japanese

Bookmarks

The vno Deno module, which self-describes as the first build tool for compiling and bundling Vue single-file components in a Deno runtime environment, recently released its first stable version. vno v1.0 features a parser, compiler, bundler, and adapter. A server-side renderer is planned.

The vno team explained their motivation as follows:

Vue is an approachable JavaScript framework with an exciting ecosystem with remarkable versatility. Deno is a runtime environment intent on improving the shortcomings of Node.js. We wanted to be able to leverage the Vue framework in a Deno runtime environment, but could not find a tool that made this possible. So we decided to make it ourselves.

vno is a suite of tools integrated via a command-line interface (CLI). The suite includes a parser, compiler, bundler, and scaffold generator. vno claims to enable developers for the first time to develop a Vue web application without leaving Deno. Existing Vue tooling typically runs in Node and browser environments.

Developers may create a new Vue project in a Deno terminal with the scaffolding provided by vno:

vno create [project name]

The command thereabove assumes prior installation of vno as follows:

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

Developers may also build a Vue codebase with vno (vno build command). The build tool will recursively walk through the file structure and parse encountered Vue files (.vue extension). The build tool produces build.js and style.css files that will be referred to in an index.html. That HTML file can then be served by a web server to start the Vue application.
vno build animated gif demo
(Source: vno gitHub project)

vno provides the ability to run both a dev (vno run dev) and production server (vno run server). vno’s behavior can be customized via a vno.config.json file. An example of config file is as follows:

{
  "root": "App",
  "entry": "./path/to/rootcomponent",
  "options": {
    "title": "an example application"
    "port": 4040
  },
  "server": "./path/to/server.ts"
}

Vue, originally released in 2014, strives to be a progressive JavaScript framework for creating web applications. Deno strives to be a secure runtime for JavaScript and Typescript. Users can grant explicit permissions when running a Deno program. A Deno program may also request permission to use protected capabilities at runtime. Deno reached version 1.0 in May 2020 following two years of continuous development. Erisan Olasheni, CTO at siit.co, recently published an article on InfoQ introducing Deno with practical examples.

The vno module is authored by Mikey Gower, Jordan Grubb, Kyle Jurassic, and Andrew Rehrig. vno is open-source software distributed under the MIT license.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT