vue-fetcher
v1.2.1
Published
Simple javascript class used for asynchronous fetching Vue components and templates, without need to setup and use webpack or other tools.
Downloads
15
Maintainers
Readme
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:
<script src="//unpkg.com/vue-fetcher"></script>
<script src="//cdn.jsdelivr.net/npm/vue-fetcher"></script>
Basic usage
// init vue-fetcher
const fetcher = new VueFetcher();
// fetch all components
let components = {};
["hello", "goodbye", /* ... */ ].forEach(component => components[component] = fetcher.fetch(component));
// init vue
const app = new Vue({
components,
// ...
}).$mount("#app");
Basic usage with vue-router
// init vue-fetcher
const fetcher = new VueFetcher();
// init vue-router
const router = new VueRouter({
routes: ["hello", "goodbye", /* ... */ ].map(route => ({
path: "/" + route,
component: fetcher.fetch(route)
})),
// ...
});
// init vue
const app = new Vue({
router,
// ...
}).$mount("#app");
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: "...",
data(): {
// ...
},
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.