https://andrew-rehrig.medium.com/vno-a-vue-deno-love-story-a9dd4d130ac7 Get started Open in app Andrew Rehrig 7 Followers About Follow Sign in Get started Follow 7 Followers About Get started Open in app vno: a vue / deno love story Andrew Rehrig Andrew Rehrig 2 days ago*6 min read vno.land vno.land the first native build tool for compiling and bundling Vue single-file components in a Deno runtime What is vno? Vno is a parser, compiler, and bundler and can be easily accessed through an integrated CLI tool that will either create an entire project from scratch, including an example file structure and components, or optimize an existing Vue project with a few simple commands. Recently, a production level release of Deno emerged onto the development landscape as an alternative to Node.js and has been steadily gaining popularity ever since. Deno is a secure-by-default runtime environment that aims to simplify many of the operations formerly outsourced to node modules. Similarly, Vue has been gaining ground on both React and Angular since its release in 2014, with a lot of developers excited about its flexibility and ease of use. However, for developers who are equally as excited by Deno as they are by Vue, there has not previously been a way to work with Vue in the Deno runtime. Until now. ________________________________ Enter vno As the first build tool for compilation and bundling of Vue single-file components in a Deno runtime, vno allows a user to employ the elegance and functionality afforded by developing with Vue while offering the security and simplicity of Deno. How does vno work? 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. The vno module 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. During the parse operation 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 a build.js file and a style.css file. It is important to note that as of this writing, scoped css styling is still in development and is not currently supported. For best results, it is recommended that every aspect of a component that may require individual styling be given a unique identifier tag. Once the build is complete, the build.js and style.css will need to be linked into the server and referenced inside the index.html file. Upon initializing the server, it is clear how vno has adapted Vue files to be served via Deno to the browser, which, until the introduction of vno, was not possible. Utilizing the CLI The CLI and its associated documentation can all be found at the vno repository on github. In order to run vno, the linked mod.ts file will need to be installed locally. In the terminal deno install the mod.ts, making sure to name it using the -n flag (vno is strongly suggested). install vno locally with the link to the hosted mod.ts Upon successful completion of the install, the executable needs to be run in order to provide the path to the terminal. Once this is complete, vno will be installed into the local directory and will be accessible via the vno keyword. vno create to initialize a new vno project Image for post Image for post export the path and run vno create In order to set up a project and flesh out a file tree, run vno create . The terminal will respond with prompts for customization if desired, and if no customization is required will auto-populate using defaults. Choosing the default options will result in a file tree containing a root Vue component entitled App.vue, a components directory entitled "components" containing a child component HelloVno.vue, a public folder containing an index.html. vno build to create a bundled Javascript file Image for post Image for post Now that a basic template has been created, the build can be instantiated. Entering vno build into the terminal will read the vno.config.json file and initiate the parse through all components (in the case of this example, App and HelloVno), link them, and write that information into two files which will show up inside a vno-build directory. Opening the resultant build.js file will show the template and style tags from all components transformed into a string and correctly formatted for processing by the browser. Inside the style.css will be the styling for all components. The vno build process will traverse and link all .vue components so that when they are bundled and delivered they are written in the proper order to ensure that any component that relies on another is available at runtime. vno run dev to utilize development server Image for post Image for post In order to facilitate development while running Deno, the vno run dev command will speed the load time and prevent a multi-step manual rebuild by connecting components to a basic, pre-built server thus allowing for changes made to components to be more quickly reflected in the browser. Using vno as a stand-alone module Users with a prebuilt Vue application or who prefer not to employ the create-vue functionality of the CLI can simply follow the install instructions above to install vno locally, then create a vno.config.json file to specify the name and relative path of the root Vue component inside the root directory, and then run vno build from the root directory. This will create a bundled build.js and style.css located inside the vno-build folder. Simply make sure these are referenced in the appropriate places in the server and in the index.html. By placing a server property into the vno.config.json with the value of the path to the server from the root, the server can be accessed and initiated without having to do a manual rebuild by using vno run server. Image for post Image for post vno.config.json vno run server to run the server Image for post Image for post vno run server With the option to either use the vno functionality as a stand-alone module or harness the power of its built in CLI functionality, vno has opened the door for developers of all abilities to begin exploring the power and potential of Deno. The all-in-one parsing, compiling, and bundling offered by vno not only makes a Vue frontend in a Deno runtime possible, it makes it easy. For more information about vno see the links below: vno.land deno.land/x/vno oslabs-beta/vno @vno.land the vno module was authored by : [?] Mikey Gower | github | linkedin [?] Jordan Grubb | github | linkedin [?] Kyle Jurassic | github | linkedin [?] Andrew Rehrig | github | linkedin Written by Andrew Rehrig full stack developer | flutist Follow 2.1K 2.1K 2.1K * Vue * Deno * Vno * Build Tools * Integration More from Andrew Rehrig Follow full stack developer | flutist More From Medium Changing Default Font in Vuetify.js and Nuxt.js Jarek Lipski in Untitled Factory [0] [0] Infinite Currying in Javascript Seena Rowhani [0] [0] Getting Started With Serverless Azure Static WebApps (React, Angular, Vue, .. + Backend) Lucas Jellema in The Startup [0] [0] How To Implement a Linked List Using JavaScript Shivam Kaushik in Better Programming [1] [1] Understanding Regular Expressions in JavaScript Ferenc Almasi in The Startup [1] [1] PokeAPI REST in Node.js with Express, TypeScript, MongoDB and Docker -- Part 2 Estefania Garcia Gallardo in Better Programming [1] [1] Calculate the distance between two points on Earth using Javascript Richard Miles [1] [1] How binding data works in Svelte Jangwook Kim in JavaScript In Plain English [1] [1] About Help Legal Get the Medium app A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store