Introduction

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.

What is Vue Blocks

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.

The Syntax

<template component="component-name">
    <div>
        <!-- HTML Template here -->
    </div>
    <style scoped>
        /* Scoped styles here */
    </style>
    <script>
        // Vue component definition like in Single File Components.
        export default {
            data() {
                
            },
            mounted() {
            },
            methods: {
                method1() { 
                }
            }
        }
    </script>
</template>