Got a PoC, demo or idea that needs to be coded up and don't want to be bothered with build tools (yet)?
Vue Blocks makes writing vue applications in pure HTML without tooling considerably less painful.
Vue Blocks is a layer on top of Vue (v2) and VueRouter that allows you to write vue components and routes in an enjoyable way without having to rely on build tools. Even though Vue allows you to build an application without requiring any build tools you will find out that the no-tool experience gets chaotic pretty quickly. There are many ways you can go about writing components and templates, but usually involve going `all javascript` with your components/templates, having to refer to <template> tags scattered all over your html document, or giving in to using build tools.
To solve this problem Vue blocks introduces the `<template component>` syntax. This tag allows you to keep your component's script, style and template neatly together. Because it's a simple HTML tag we are able to define many components in a single HTML document. Vue Blocks will scan the document and automatically register each component it encounters.
For prototypes, PoC's and demos. Instead of your vue script tag add `<script src="https://unpkg.com/vue-blocks/dist/vue-blocks.js"<>/script>` to your
HTML document. Add `<app></app>` to your body and define a component named `app` to begin
with. Vue 2.6 and VueRouter 2.8 are included. No tooling required.
You may have a look at
You can also play with the syntax via the Online Editor
You may install vue-blocks via npm: `npm install vue-blocks`. To use VueBlocks in javascript:
The repository is public to all, feel free to clone https://github.com/j-angnoe/vue-blocks
Here we demonstrate a small vue application with one route (/) and a component that may receive a prop.
If you'd like to use this example as a basis copy-paste this html to an empty document and open it in a browser.
I've prepared a few fiddles for you to play around with:
Vue blocks does a simple emulation of scoped styles. Trigger this behavior by writting `<style scoped>`.
Here we demonstrate how you can work with Vue Router and Routing params, mainly with `<template url="..">` and `<template sub-url="...">` for nested
require is a function that is available to you inside the script block that are inside Vue Block types (template component, url, sub-url and module)
require() will first look at if the 'module' is defined on window. If it's not defined it will attempt to asynchronously load it from https://jspm.dev
There are two ways you may define `modules` inside a html document managed by Vue Blocks
Have an NPM module you want to try out, require() it and it will be loaded from https://jspm.dev. As you can expect this has pro's and con's.
Having to write `export default { data() { }, mounted() { }, methods: { }}` all the time becomes a chore at some point. I wanted have the ability to concentrate purely on what my component has and should be doing. So I saw an opportunity to shorten the component definition syntax a bit:
As you can see using a class greatly reduces the amount of extra characters that need to be typed.
The short-syntax mode is triggered by typing `return class vue` and then typing a javascript class definition. Vue Blocks is able to take this class definition and rewrite it to a classic vue component definition. Please be aware that components defined this way will only work in modern browser that support `class property` syntax.
If you encounter this and want it converted to classical vue you may use the online vue converter
We have been talking about single html document a lot, but we do support working with a bunch of files.
With `<template src="...">` you may load Vue Single File components and/or html documents that contain Vue Blocks style components. the distinction is made by the extension you are trying to load.
Known limitations of loading vue files: Only the processing of HTML, CSS and javascript are supported.
Require statements will be processed according to the
So recursive loading of sources is possible. Also resolution of relative pathnames relative to the file that was loaded is implemented.