Numbers Produce Meaning

    vue-fetcher

    1.2.1 • Public • Published

    vue-fetcher

    npm npm npm paypal

    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

    Install

    npm i vue-fetcher

    DownloadsWeekly Downloads

    2

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    5

    Last publish

    Collaborators

    • oliverfindl