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

Via npm [package]:

$ npm install vue-fetcher

Via yarn [package]:

$ yarn add vue-fetcher

From unpkg:

<script src="//unpkg.com/vue-fetcher"></script>

From jsDelivr [package]:

<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.

---

License

MIT