Need help with vno?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

1 Stars 1 Forks MIT License 855 Commits 0 Opened issues


a build tool for compiling and bundling Vue single-file components

Services available


Need anything else?

Contributors list

vno logo

- Logo Design by Brendan McCabe


The first build tool for compiling and bundling Vue components in a Deno runtime environment

license issues last commit Repo stars


  • Parser
  • Compiler
  • Bundler
  • Adapter


  • Vue is an approachable, incrementally adoptable JavaScript framework with an exciting ecosystem. Deno is a new runtime environment for JavaScript, built to address the shortcomings of node.js. We wanted to create a tool that let developers easily set up Vue applications in a Deno runtime environment. Meet vno!

How to use vno

  • You can use the vno Command Line Interface to quickly create a new Vue project in a Deno runtime
  • OR you can use the vno build method to compile an existing Vue file structure into a Deno-legible .js file

vno installation

  • vno requires the use of Deno version 1.10 or above
  • MacOS:
    • Run the following command in your terminal to install vno on your machine.
deno install --allow-net --unstable
  • WSL/Linux:
    • Open
      with your editor of choice.
    • Add
      export PATH="/home//.deno/bin:$PATH
      to the end of the file.
    • Run the following command in your terminal to install vno on your machine.
sudo deno install --allow-net --unstable
  • Deno requires the
    permission to run an installation
  • This feature and many of the others used in vno are still considered "unstable" for Deno. Run the command with
    to allow these resources to execute.
  • The force flag
    can be used if you want to overwrite an existing copy of the module
  • You can name the module in your path with the name flag
    , 'vno' is the default name.
  • If you have not already added Deno bin into your path, you will need to do so.

    • MacOS: Copy the export path your terminal returns and paste it into your terminal
    • WSL/Linux: Replace
      with your username and paste it into your terminal:
      export PATH="/home//.deno/bin:$PATH"
      install gif

a quick word about permissions

  • Deno is secure by default, which means that explicit permissions are required for certain tasks.
  • You can avoid responding to the permissions requests by flagging the installation script.
  • Most of our modules require both read and write permissions
  • If you decide not to flag permissions at installation, you will be prompted in the terminal after executing a command.
  • If you would like to avoid writing out the permissions altogether, you can also use the

vno config

  • vno.config.json should be in the root of your project
  • following is a description of the object interface:
interface Config {
    entry: string;
      //entry is the path to root component's directory : i.e. './client/'
    root: string;
      //root is the filename of your root component : i.e. 'App'
    vue?: 2 | 3;
      //vue is the number 2 or 3 : 2 = vue v2.6.12 (default); 3 = vue v3.0.5 
    options?: {
      port?: number;
        //preferred port for the dev server : defaults to `3000`
      title?: string;
        //title of your project
      hostname?: string;
        //preferred host : defaults to ``


create a new project

  • Project name will become the directory that holds your project (you must CD into project directory after running the
    vno create
  • If the project name argument is omitted, then the project will be created in the current working directory.
  • Using
    vno create
    will give an option to build out a universal or single page application. Choosing 'SPA' will give you the option of choosing to add Vue Router, as well as choosing between Vue 2 or Vue 3 syntax.
vno create [project name]

  • OR If you'd rather not install:
deno run --allow-read --allow-write --allow-net --unstable create [project name]

run a build on a project

  • To invoke the build method and dynamically create bundled js and css files for your application, type the following into the terminal:
vno build


deno run --allow-read --allow-write --allow-net --unstable build

vno build

Scoped styling for CSS is currently not supported, but will be added to future builds

run a build on a project AND create a server configured for SSR

  • To invoke the build method and dynamically create bundled JS and CSS files, along with a server.ts for server side rendering your application, type the following into the terminal:
vno build --ssr


deno run --allow-read --allow-write --allow-net --unstable build --ssr

vno build ssr

run dev server includes live reload

  • Running the dev server dynamically runs a new build and runs the application on a module hosted server.
  • Native
    vno run dev
    command automatically enables live reload. Using Live Reload injects a WebSocket connection to build.js. Remove it with:
    vno run build
  • Invoke the dev server using the following commands:
vno run dev


deno run --allow-read --allow-write --allow-net --unstable run dev

vno run dev & live reload

vno as an API

initializing your application with the api

  • You can import vno into your application with the following URL :
    With a vno.config.json, no argument is needed The API will search for the config and apply it to your application
import { Factory } from '';

const vno = new Factory(); await;

  • Without a vno.config.json, you can input the object directly into the Factory instance
import { Factory } from '';

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

will run a build on the entire application and compile it to a "vno-build" directory as one JavaScript file and one CSS file.

accessing component object storage

  • After running the build, parsed components are accessible inside the storage property on the Factory class.'App');

The argument accepted by the get method for storage is the component filename

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.