{"id":42280512,"url":"https://github.com/j-angnoe/vue-blocks","last_synced_at":"2026-01-27T08:19:18.496Z","repository":{"id":56021019,"uuid":"78058977","full_name":"j-angnoe/vue-blocks","owner":"j-angnoe","description":"Multiple vue components and routes in a single file. For quick prototyping in html","archived":false,"fork":false,"pushed_at":"2025-07-21T23:11:44.000Z","size":1250,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T18:43:34.566Z","etag":null,"topics":["experiments","fiddle","hacking","prototyping","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/j-angnoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-04T22:42:53.000Z","updated_at":"2025-05-05T07:54:06.000Z","dependencies_parsed_at":"2022-08-15T11:31:33.293Z","dependency_job_id":null,"html_url":"https://github.com/j-angnoe/vue-blocks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/j-angnoe/vue-blocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-angnoe%2Fvue-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-angnoe%2Fvue-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-angnoe%2Fvue-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-angnoe%2Fvue-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j-angnoe","download_url":"https://codeload.github.com/j-angnoe/vue-blocks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-angnoe%2Fvue-blocks/sbom","scorecard":{"id":499487,"data":{"date":"2025-08-11","repo":{"name":"github.com/j-angnoe/vue-blocks","commit":"9d96fecc147ff00247cea139f985446034ce633a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"38 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-876r-hj45-fw7g","Warn: Project is vulnerable to: GHSA-v63x-xc9j-hhvq","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-w5q7-3pr9-x44w","Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T21:26:14.570Z","repository_id":56021019,"created_at":"2025-08-19T21:26:14.570Z","updated_at":"2025-08-19T21:26:14.570Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28809460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["experiments","fiddle","hacking","prototyping","vue"],"created_at":"2026-01-27T08:19:17.809Z","updated_at":"2026-01-27T08:19:18.482Z","avatar_url":"https://github.com/j-angnoe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Blocks\n\nVue Blocks is a Vue Plugin that extracts and registers vue components from an HTML \ndocument, without external tooling. This is done by looking for `\u003ctemplate component=\"\"\u003e` tags. \nWithin this tag you may write an HTML template, scoped styles and vue component javascript, just like you do when\nwriting Vue Single File Components. Lots of benefit in just over 10 KB ![current size](https://img.shields.io/github/size/j-angnoe/vue-blocks/dist/plugin.js)\n\n## The syntax\n\n```html\n\u003ctemplate component=\"my-component\"\u003e\n\t\u003cdiv\u003e\n\t\t\u003c!-- Your template HTML with Vue syntax here --\u003e\n\t\tvariable: {{my_variable}}\n\n\t\t\u003c!-- reference your components --\u003e\n\t\t\u003cmy-other-component\u003e\u003c/my-other-component\u003e\n\n\t\u003c/div\u003e\n\t\u003cstyle scoped\u003e\n\t\t/* css */\n\t\u003c/style\u003e\n\t\u003cscript\u003e\n\t\t// Vue component definition here (Like in .vue files)\n\t\texport default() {\n\t\t\tdata() {\n\t\t\t\treturn {\n\t\t\t\t\tmy_variable: 'my_value'\n\t\t\t\t}\n\t\t\t},\n\t\t\tmethods: {\n\t\t\t\tclickButton() {}\n\t\t\t}\n\t\t}\n\t\u003c/script\u003e\n\u003c/template\u003e\n```\n\n## Usage\n\nThere are a few ways you can add this layer to your application:\n\nIn HTML as Plugin:\n```html\n\u003cscript src=\"http://unpkg.com/vue-blocks/dist/plugin.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nVue.use(VueBlocks);\n...\n\u003c/script\u003e\n```\n\nUsing the bundled version which included Vue (2.6) and VueRouter (2.8): \n\n```html\n\u003cscript src=\"http://unpkg.com/vue-blocks/dist/vue-blocks.js\"\u003e\u003c/script\u003e\n\u003capp\u003e\u003c/app\u003e\n\u003ctemplate component=\"app\"\u003e\n\t\u003crouter-view\u003e\u003c/router-view\u003e\n\u003c/template\u003e\n\u003ctemplate url=\"/\"\u003e\n\t\u003cdiv\u003eLet's get going\u003c/div\u003e\n\u003c/template\u003e\n```\n\nUsing it in an existing Javascript application:\n\n```js\nimport VueBlocks from 'vue-blocks';\nVue.use(VueBlocks);\n```\n\n## Examples and Demos\n\nTake a look at some examples: \n- Demo/documentation site: https://fluxfx.nl/vue-blocks/examples/index.html\n- Single page [TodoMVC example](https://fluxfx.nl/vue-blocks/examples/todomvc.html) ([source](./examples/todomvc.html))\n- [Try it online](https://fluxfx.nl/vue-blocks/examples/try-it.html) ([source](./examples/try-it.html))\n- Check out this demo fiddle: https://jsfiddle.net/o48L0y9j/\n\nYou may copy-and-paste the [Quick Start HTML Template](#quick-start-html-template) provided \nbelow, are have a look at the [examples](./examples/index.html).\n\n## Documentation\n- Demo/documentation site: https://fluxfx.nl/vue-blocks/examples/index.html\n- Also check out [./docs/index.md](./docs/index.md)\n\n## Using the router\nBegin by writing some routes:\n\n```html\n\u003ctemplate url=\"/\"\u003e\n\t\u003cdiv\u003e \n\t\t\u003c!-- vue template for homepage... --\u003e\n\t\u003c/div\u003e\n\t\u003cstyle\u003e /* ... */ \u003c/style\u003e\n\t\u003cscript\u003e\n\t\t/* optional vue component definition */\n\t\texport default() {\n\t\t\tmounted() {\n\t\t\t\talert(\"Homepage mounted\");\n\t\t\t}\n\t\t}\n\t\u003c/script\u003e\n\u003c/template\u003e\n```\n\nPlease review the examples/index.html, or check it out online: http://fluxfx.nl/vue-blocks/examples/index.html\n\n## Quick Start HTML Template\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003ctitle\u003eVue Blocks Framework\u003c/title\u003e\n\t\t\u003clink  href=\"//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\t\t\u003cscript src=\"//unpkg.com/vue-blocks/dist/vue-blocks.js\"\u003e\u003c/script\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003capp\u003e\u003c/app\u003e\n\t\t\u003ctemplate component=\"app\"\u003e\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003c!-- vue template --\u003e\n\n\t\t\t\t\u003c!-- \u003crouter-view\u003e\u003c/router-view\u003e , if you intend to have urls on your page.--\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cscript\u003e\n\t\t\t\texport default() {\n\t\t\t\t\tmounted() {\n\t\t\t\t\t\talert(\"It works.\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\u003c/script\u003e\n\t\t\u003c/template\u003e\n\t\u003c/body\u003e\n\u003c/head\u003e\n```\n\n##  Full Example \nThis example includes some components and a few urls.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003ctitle\u003eVue Blocks Framework\u003c/title\u003e\n\t\t\u003clink  href=\"//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\t\t\u003cscript src=\"//unpkg.com/vue-blocks/dist/vue-blocks.js\"\u003e\u003c/script\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003capp\u003e\u003c/app\u003e\n\t\t\u003ctemplate component=\"app\"\u003e\n\t\t\t\u003cdiv class=\"container\"\u003e\n\t\t\t\t\u003cnav\u003e\n\t\t\t\t\t\u003cmy-navigation\u003e\u003c/my-navigation\u003e\n\t\t\t\t\u003c/nav\u003e\n\t\t\t\t\u003crouter-view\u003e\u003c/router-view\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/template\u003e\n\t\t\u003c!-- reusable components --\u003e\n\t\t\u003ctemplate component=\"my-navigation\"\u003e\n\t\t\t\u003crouter-link to=\"/\"\u003eHome\u003c/router-link\u003e\n\t\t\t\u003crouter-link to=\"/page1\"\u003ePage 1\u003c/router-link\u003e\n\t\t\u003c/template\u003e\n\t\t\u003c!-- easy urls --\u003e\n\t\t\u003ctemplate url=\"/\"\u003e\n\t\t\t\u003cdiv\u003eWelcome to my awesome app\u003c/div\u003e\n\t\t\u003c/template\u003e\n\t\t\u003ctemplate url=\"/page1\"\u003e\n\t\t\t\u003cdiv\u003ePage 1\u003c/div\u003e\n\t\t\u003c/template\u003e\n\t\t\u003c!-- route with params --\u003e\n\t\t\u003ctemplate url=\"/page2/:param\"\u003e\n\t\t\t\u003cdiv\u003ePage 2: Param {{$route.params.param}}\u003c/div\u003e\n\t\t\u003c/template\u003e\n\t\u003c/body\u003e\n\u003c/head\u003e\n```\n\n## Features\n- Include Vue 2.6.12 and VueRouter 2.8 (check [package.json](./package.json) for most recent versions)\n\n- Mutliple component\n- Auto-mount `\u003capp\u003e` component (bundled version)\n\n- `\u003ctemplate component=\"component\" props=\"prop1, prop2\"\u003e`\n\tcomponent props syntax\n\n- `\u003ctemplate url=\"/url/:param1/:param2\"\u003e` \n\turl with param auto register with VueRouter.\n\n- Scoped styles, add `\u003cstyle scoped\u003e` to your template. \n\n- `\u003ctemplate module=\"moduleName\"\u003e` \n\tdefine 'fake' javascript modules that can be require()'d later on.\n\n- You may split html files and load them asynchronously\n\t`\u003ctemplate src=\"path/to/components.html\"\u003e\u003c/template\u003e`\n\n- You may load .vue files:\n\t`\u003ctemplate src=\"path/to/vue-file.vue\"\u003e\u003c/template\u003e`\n\n- Short syntax for Vue components:\n\tLess boilerplate, more focus on your idea.\n\n\t```html\n\t\u003ctemplate component=\"...\"\u003e\n\t\t... \n\t\t\u003cscript\u003e\n\t\treturn class vue {\n\t\t\tmy_variable = 'my_value';\n\t\t\tcomputed = {\n\t\t\t\t// ...\n\t\t\t}\n\t\t\twatch = {\n\t\t\t\t// ...\n\t\t\t}\n\t\t\tmounted() {\n\t\t\t\t// mounted function\n\t\t\t}\n\t\t\tasync clickButton() {\n\t\t\t\t// this will be a Vue method.\n\t\t\t}\n\t\t}\n\t\t\u003c/script\u003e\n\t\u003c/template\u003e\n\t```\n\n- You can require every npm module, they will be loaded from https://jspm.dev.\n\tLess need for build tools, more focus on your idea.\n\n\t```html\n\t\u003ctemplate component=\"...\"\u003e\n\t\t... \n\t\t\u003cscript\u003e\n\t\t\tvar uniqid = require('uniqid');\t// https://jspm.dev/uniqid will be loaded\n\t\t\t// var uniqid = require('https://jspm.dev/uniqid');  // Is equivalent.\n\n\t\t\texport default() {\n\t\t\t\tmounted() {\n\t\t\t\t\talert(\"My unique id: \" + uniqid())\n\t\t\t\t}\n\t\t\t}\n\t\t\u003c/script\u003e\n\t\u003c/template\u003e\n\t```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj-angnoe%2Fvue-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj-angnoe%2Fvue-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj-angnoe%2Fvue-blocks/lists"}