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

oslabs-beta
1 Stars 1 Forks MIT License 855 Commits 0 Opened issues

Description

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

vno
twitter

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

license issues last commit Repo stars

Features

  • Parser
  • Compiler
  • Bundler
  • Adapter

Overview

  • 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 https://deno.land/x/vno/install/vno.ts
  • WSL/Linux:
    • Open
      /home//bashrc
      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 https://deno.land/x/vno/install/vno.ts
  • Deno requires the
    --allow-net
    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
    --unstable
    to allow these resources to execute.
  • The force flag
    -f
    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
    -n
    or
    --name
    , '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
      root
      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
    --allow-read
    &
    --allow-write
  • 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
    -A
    or
    --allow-all
    tag

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 `0.0.0.0`
    };
  }

CLI

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
    command).
  • 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 https://deno.land/x/vno/install/vno.ts 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

OR

deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts 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

OR

deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts 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

OR

deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts 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 :
    https://deno.land/x/vno/dist/mod.ts
    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 'https://deno.land/x/vno/dist/mod.ts';

const vno = new Factory(); await vno.build();

  • Without a vno.config.json, you can input the object directly into the Factory instance
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();

vno.build()
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.
vno.storage.get('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.