vue-fetcher

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