https://github.com/j-angnoe/vue-blocks
Multiple vue components and routes in a single file. For quick prototyping in html
https://github.com/j-angnoe/vue-blocks
experiments fiddle hacking prototyping vue
Last synced: 4 months ago
JSON representation
Multiple vue components and routes in a single file. For quick prototyping in html
- Host: GitHub
- URL: https://github.com/j-angnoe/vue-blocks
- Owner: j-angnoe
- Created: 2017-01-04T22:42:53.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-07-21T23:11:44.000Z (10 months ago)
- Last Synced: 2025-08-09T18:43:34.566Z (10 months ago)
- Topics: experiments, fiddle, hacking, prototyping, vue
- Language: JavaScript
- Homepage:
- Size: 1.19 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 `` 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 
## The syntax
```html
variable: {{my_variable}}
/* css */
// Vue component definition here (Like in .vue files)
export default() {
data() {
return {
my_variable: 'my_value'
}
},
methods: {
clickButton() {}
}
}
```
## Usage
There are a few ways you can add this layer to your application:
In HTML as Plugin:
```html
Vue.use(VueBlocks);
...
```
Using the bundled version which included Vue (2.6) and VueRouter (2.8):
```html
Let's get going
```
Using it in an existing Javascript application:
```js
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](https://fluxfx.nl/vue-blocks/examples/todomvc.html) ([source](./examples/todomvc.html))
- [Try it online](https://fluxfx.nl/vue-blocks/examples/try-it.html) ([source](./examples/try-it.html))
- Check out this demo fiddle: https://jsfiddle.net/o48L0y9j/
You may copy-and-paste the [Quick Start HTML Template](#quick-start-html-template) provided
below, are have a look at the [examples](./examples/index.html).
## Documentation
- Demo/documentation site: https://fluxfx.nl/vue-blocks/examples/index.html
- Also check out [./docs/index.md](./docs/index.md)
## Using the router
Begin by writing some routes:
```html
/* ... */
/* optional vue component definition */
export default() {
mounted() {
alert("Homepage mounted");
}
}
```
Please review the examples/index.html, or check it out online: http://fluxfx.nl/vue-blocks/examples/index.html
## Quick Start HTML Template
```html
Vue Blocks Framework
export default() {
mounted() {
alert("It works.");
}
}
```
## Full Example
This example includes some components and a few urls.
```html
Vue Blocks Framework
Home
Page 1
Welcome to my awesome app
Page 1
Page 2: Param {{$route.params.param}}
```
## Features
- Include Vue 2.6.12 and VueRouter 2.8 (check [package.json](./package.json) for most recent versions)
- Mutliple component
- Auto-mount `` component (bundled version)
- ``
component props syntax
- ``
url with param auto register with VueRouter.
- Scoped styles, add `` 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.
```html
<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.
```html
<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>
```