vue-fetcher
Simple javascript class used for asynchronous fetching Vue components and templates, without need to setup and use webpack or other tools.
vue-fetcher 1.x works with Vue 1.x and 2.x. It's also compatible with vue-router 2.x and 3.x and also with axios, which fallbacks to window.fetch if axios is not detected.
vue-fetcher does not follow Single File Component approach. It's using 2 separate files for component logic and component template (optional - can be defined in component logic file) instead.
Notice
With update to version 1.1.3 (2018-03-10) vue-fetcher was refactored and some options was renamed and some removed. So if you are upgrading, rename them according this readme file.
Install
$ npm install vue-fetcher
$ yarn add vue-fetcher
From unpkg:
Basic usage
// init vue-fetcherconst fetcher = ; // fetch all componentslet components = {};"hello" "goodbye" /* ... */ ; // init vueconst app = components // ...;
Basic usage with vue-router
// init vue-fetcherconst fetcher = ; // init vue-routerconst router = routes: "hello" "goodbye" /* ... */ // ...; // init vueconst app = router // ...;
Configuration
It's possible to configure vue-fetcher with options object passed to vue-fetcher at initialization.
Default options:
let options = base: "static/vue" componentDirectory: "components" templateDirectory: "templates" componentExtension: "vue.js" templateExtension: "vue.html";
Which translates into folder structure, where components are stored in:
static/vue/components/<component-name>.vue.js
And templates in:
static/vue/templates/<component-name>.vue.html
Template files are basic HTML files, whereas component files are JSON-like javascript files.
Example component:
template: "..." : // ... methods: // ... // ...
There are multiple custom template definitions supported:
// basic definitions (same as Vue) template: "<div> ... </div>" template: ` <div> ... </div> ` // x-template definition (same as Vue) template: "#my-id" // inline-template definition template: "!inline" // id and html are optional, will get removed and will be handled like basic Vue template definition template: "id: #my-id" template: "html: <div> ... </div>" // with path, file and url, vue-fetcher will fetch template file based on value in this attribute (all three variants have same internal functionality) template: "path: ./static/vue/..." template: "file: /my-vue-project/static/vue/..." template: "url: https://.../static/vue/..." // if empty or omitted, vue-fetcher will fetch template file based on vue-fetcher options set at initialization template: ""
It's possible to use a dummy variable in your component logic file, so the syntax will be valid for editors with javascript syntax highlight:
let dummy = // ...;
It's also possible to use vue-fetcher from fetched components, but it's necessary to save reference of vue-fetcher as global variable.