vue-blocks

v0.4.3

Published

2 years ago

Vue Blocks Framework

Downloads

0High
0Medium
0Low

j-angnoe

Vue Blocks

Vue Blocks is a Vue Plugin that extracts and registers vue components from an HTML document, without external tooling. This is done by looking for <template component=""> tags. Within this tag you may write an HTML template, scoped styles and vue component javascript, just like you do when writing Vue Single File Components. Lots of benefit in just over 10 KB current size

The syntax

<template component="my-component">
	<div>
		<!-- Your template HTML with Vue syntax here -->
		variable: {{my_variable}}

		<!-- reference your components -->
		<my-other-component></my-other-component>

	</div>
	<style scoped>
		/* css */
	</style>
	<script>
		// Vue component definition here (Like in .vue files)
		export default() {
			data() {
				return {
					my_variable: 'my_value'
				}
			},
			methods: {
				clickButton() {}
			}
		}
	</script>
</template>

Usage

There are a few ways you can add this layer to your application:

In HTML as Plugin:

<script src="http://unpkg.com/vue-blocks/dist/plugin.js"></script>
<script>
Vue.use(VueBlocks);
...
</script>

Using the bundled version which included Vue (2.6) and VueRouter (2.8):

<script src="http://unpkg.com/vue-blocks/dist/vue-blocks.js"></script>
<app></app>
<template component="app">
	<router-view></router-view>
</template>
<template url="/">
	<div>Let's get going</div>
</template>

Using it in an existing Javascript application:

import VueBlocks from 'vue-blocks';
Vue.use(VueBlocks);

Examples and Demos

Take a look at some examples:

Demo/documentation site: https://fluxfx.nl/vue-blocks/examples/index.html
Single page TodoMVC example (source)
Try it online (source)
Check out this demo fiddle: https://jsfiddle.net/o48L0y9j/

You may copy-and-paste the Quick Start HTML Template provided below, are have a look at the examples.

Documentation

Demo/documentation site: https://fluxfx.nl/vue-blocks/examples/index.html
Also check out ./docs/index.md

Using the router

Begin by writing some routes:

<template url="/">
	<div> 
		<!-- vue template for homepage... -->
	</div>
	<style> /* ... */ </style>
	<script>
		/* optional vue component definition */
		export default() {
			mounted() {
				alert("Homepage mounted");
			}
		}
	</script>
</template>

Please review the examples/index.html, or check it out online: http://fluxfx.nl/vue-blocks/examples/index.html

Quick Start HTML Template

<!DOCTYPE html>
<html>
	<head>
		<title>Vue Blocks Framework</title>
		<link  href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="//unpkg.com/vue-blocks/dist/vue-blocks.js"></script>
	</head>
	<body>
		<app></app>
		<template component="app">
			<div>
				<!-- vue template -->

				<!-- <router-view></router-view> , if you intend to have urls on your page.-->
			</div>
			<script>
				export default() {
					mounted() {
						alert("It works.");
					}
				}
			</script>
		</template>
	</body>
</head>

Full Example

This example includes some components and a few urls.

<!DOCTYPE html>
<html>
	<head>
		<title>Vue Blocks Framework</title>
		<link  href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="//unpkg.com/vue-blocks/dist/vue-blocks.js"></script>
	</head>
	<body>
		<app></app>
		<template component="app">
			<div class="container">
				<nav>
					<my-navigation></my-navigation>
				</nav>
				<router-view></router-view>
			</div>
		</template>
		<!-- reusable components -->
		<template component="my-navigation">
			<router-link to="/">Home</router-link>
			<router-link to="/page1">Page 1</router-link>
		</template>
		<!-- easy urls -->
		<template url="/">
			<div>Welcome to my awesome app</div>
		</template>
		<template url="/page1">
			<div>Page 1</div>
		</template>
		<!-- route with params -->
		<template url="/page2/:param">
			<div>Page 2: Param {{$route.params.param}}</div>
		</template>
	</body>
</head>

Features

Include Vue 2.6.12 and VueRouter 2.8 (check package.json for most recent versions)
Mutliple component
Auto-mount <app> component (bundled version)
<template component="component" props="prop1, prop2"> component props syntax
<template url="/url/:param1/:param2"> url with param auto register with VueRouter.
Scoped styles, add <style scoped> to your template.
<template module="moduleName"> define 'fake' javascript modules that can be require()'d later on.
You may split html files and load them asynchronously <template src="path/to/components.html"></template>
You may load .vue files: <template src="path/to/vue-file.vue"></template>

Short syntax for Vue components: Less boilerplate, more focus on your idea.

<template component="...">
	... 
	<script>
	return class vue {
		my_variable = 'my_value';
		computed = {
			// ...
		}
		watch = {
			// ...
		}
		mounted() {
			// mounted function
		}
		async clickButton() {
			// this will be a Vue method.
		}
	}
	</script>
</template>

You can require every npm module, they will be loaded from https://jspm.dev. Less need for build tools, more focus on your idea.

<template component="...">
	... 
	<script>
		var uniqid = require('uniqid');	// https://jspm.dev/uniqid will be loaded
		// var uniqid = require('https://jspm.dev/uniqid');  // Is equivalent.

		export default() {
			mounted() {
				alert("My unique id: " + uniqid())
			}
		}
	</script>
</template>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme