{"id":13893771,"url":"https://github.com/open-source-labs/Vno","last_synced_at":"2025-07-17T08:30:47.527Z","repository":{"id":41657490,"uuid":"406059530","full_name":"open-source-labs/Vno","owner":"open-source-labs","description":"a build tool for compiling and bundling Vue single-file components","archived":false,"fork":true,"pushed_at":"2022-02-01T04:53:42.000Z","size":7232,"stargazers_count":77,"open_issues_count":6,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-15T00:07:17.742Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vno.land","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"mggower/vno","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/open-source-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-13T17:03:52.000Z","updated_at":"2025-02-10T09:35:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/open-source-labs/Vno","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/open-source-labs/Vno","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FVno","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FVno/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FVno/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FVno/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-source-labs","download_url":"https://codeload.github.com/open-source-labs/Vno/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FVno/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265585273,"owners_count":23792712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-06T18:01:16.834Z","updated_at":"2025-07-17T08:30:46.754Z","avatar_url":"https://github.com/open-source-labs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cimg src=\"./assets/vnologo.svg\"\n     alt=\"vno logo\"\n     style=\"float: left; margin-right: 10px;\" /\u003e\n\n\u003cp align='right'\u003e - Logo Design by \u003ca href='https://www.behance.net/bmccabe'\u003eBrendan McCabe\u003c/a\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n\t\u003ca href='https://www.vno.land'\u003evno\u003c/a\u003e \u003cbr/\u003e\n\t\u003cimg alt=\"twitter\" src=\"https://img.shields.io/twitter/follow/vno_land?label=%40vno_land\u0026logoColor=%2357d3af\u0026style=social\"\u003e\u003c/h1\u003e\n\t\u003ch4 align='center'\u003e The first \u003ca href='https://deno.land/x/vno'\u003ebuild tool\u003c/a\u003e for compiling and bundling \u003ca href='https://github.com/vuejs'\u003eVue\u003c/a\u003e components in a \u003ca href='https://github.com/denoland'\u003eDeno\u003c/a\u003e runtime environment\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"license\" src=\"https://img.shields.io/github/license/oslabs-beta/vno?color=%2357d3af\"\u003e\n  \u003cimg alt=\"issues\" src=\"https://img.shields.io/github/issues-raw/oslabs-beta/vno?color=yellow\"\u003e\n  \u003cimg alt=\"last commit\" src=\"https://img.shields.io/github/last-commit/oslabs-beta/vno?color=%2357d3af\"\u003e\n  \u003cimg alt=\"Repo stars\" src=\"https://img.shields.io/github/stars/oslabs-beta/vno?logoColor=%2334495e\u0026style=social\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- Parser\n- Compiler\n- Bundler\n- Adapter\n\n## Overview\n\n- 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!\n\n## How to use vno\n\n- You can use the vno Command Line Interface to quickly create a new Vue project in a Deno runtime\n- OR you can use the vno build method to compile an existing Vue file structure\n  into a Deno-legible .js file\n\n### vno installation\n\n- vno requires the use of Deno version 1.10 or above\n- MacOS: \n  - Run the following command in your terminal to install vno on your machine.\n\n```bash\ndeno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts\n```\n\n- WSL/Linux: \n  - Open `/home/\u003cUSERNAME\u003e/bashrc` with your editor of choice.\n  - Add `export PATH=\"/home/\u003cUSERNAME\u003e/.deno/bin:$PATH` to the end of the file.\n  - Run the following command in your terminal to install vno on your machine.\n\n```bash\nsudo deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts\n```\n\n- Deno requires the `--allow-net` permission to run an installation\n- This feature and many of the others used in vno are still considered\n  \"unstable\" for Deno. Run the command with `--unstable` to allow these\n  resources to execute.\n- The force flag `-f` can be used if you want to overwrite an existing copy of\n  the module\n- You can name the module in your path with the name flag `-n` or `--name` ,\n  'vno' is the default name.\n- If you have not already added Deno bin into your path, you will need to do so.\n\n  - MacOS: Copy the export path your terminal returns and paste it into your terminal\n  - WSL/Linux: Replace `root` with your username and paste it into your terminal: \n      `export PATH=\"/home/\u003cUSERNAME\u003e/.deno/bin:$PATH\"`\n  ![install gif](https://media.giphy.com/media/LVokebNuReGJuwU13R/giphy.gif)\n\n### a quick word about permissions\n\n- Deno is secure by default, which means that explicit permissions are required\n  for certain tasks.\n- You can avoid responding to the permissions requests by flagging the\n  installation script.\n- Most of our modules require both read and write permissions `--allow-read` \u0026\n  `--allow-write`\n- If you decide not to flag permissions at installation, you will be prompted in\n  the terminal after executing a command.\n- If you would like to avoid writing out the permissions altogether, you\n  can also use the `-A` or `--allow-all` tag\n\n### vno config\n\n- vno.config.json should be in the root of your project\n- following is a description of the object interface:\n\n```ts\ninterface Config {\n    entry: string;\n      //entry is the path to root component's directory : i.e. './client/'\n    root: string;\n      //root is the filename of your root component : i.e. 'App'\n    vue?: 2 | 3;\n      //vue is the number 2 or 3 : 2 = vue v2.6.12 (default); 3 = vue v3.0.5 \n    options?: {\n      port?: number;\n        //preferred port for the dev server : defaults to `3000`\n      title?: string;\n        //title of your project\n      hostname?: string;\n        //preferred host : defaults to `0.0.0.0`\n    };\n  }\n```\n\n## CLI\n\n### create a new project\n\n- Project name will become the directory that holds your project (you must CD\n  into project directory after running the `vno create` command).\n- If the project name argument is omitted, then the project will be created in the current working directory.\n- 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.\n\n```bash\nvno create [project name]\n```\n\n![](https://i.ibb.co/Fw5Sp7n/vno-create.gif)\n\n- _OR_ If you'd rather not install:\n\n```bash\ndeno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts create [project name]\n```\n\n### run a build on a project\n\n- To invoke the build method and dynamically create bundled js and css files for\n  your application, type the following into the terminal:\n\n```bash\nvno build\n```\n\n_OR_\n\n```bash\ndeno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts build\n```\n\n![vno build](https://i.ibb.co/jgRFXvc/vno-build.gif)\n\n**Scoped styling for CSS is currently not supported, but will be added to future builds**\n\n### run a build on a project AND create a server configured for SSR\n\n- 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:\n\n```bash\nvno build --ssr\n```\n_OR_\n\n```bash\ndeno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts build --ssr\n```\n\n![vno build ssr](https://i.ibb.co/dfPZTH6/vno-build-ssr.gif)\n\n### run dev server includes live reload\n\n- Running the dev server dynamically runs a new build and runs the application\n  on a module hosted server.\n- 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`\n- Invoke the dev server using the following commands:\n\n```bash\nvno run dev\n```\n\n_OR_\n\n```bash\ndeno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts run dev\n```\n\n![vno run dev \u0026 live reload](https://i.ibb.co/c15qK5J/final-live-gif.gif)\n\n\n\n# vno as an API\n\n### initializing your application with the api\n\n- You can import vno into your application with the following URL :\n  `https://deno.land/x/vno/dist/mod.ts` With a vno.config.json, no argument is\n  needed The API will search for the config and apply it to your application\n\n```ts\nimport { Factory } from 'https://deno.land/x/vno/dist/mod.ts';\n\nconst vno = new Factory();\nawait vno.build();\n```\n\n- Without a vno.config.json, you can input the object directly into the Factory\n  instance\n\n```ts\nimport { Factory } from 'https://deno.land/x/vno/dist/mod.ts';\n\nconst vno = Factory.create({\n  root: \"App\",\n  entry: \"./\"\n  vue: 3,\n  options: {\n    port: 3000\n  }\n})\n\nawait vno.build();\n```\n\n`vno.build()` will run a build on the entire application and compile it to a\n\"vno-build\" directory as one JavaScript file and one CSS file.\n\n### accessing component object storage\n\n- After running the build, parsed components are accessible inside the storage\n  property on the Factory class.\n\n```ts\nvno.storage.get('App');\n```\n\nThe argument accepted by the get method for storage is the component filename\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2FVno","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-source-labs%2FVno","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2FVno/lists"}