A Vue.js templates

ComponentTemplate.vue

<template lang="html">

	<section class="cool-component-wrapper">

		<p>TODO</p>

	</section>

</template>

<style lang="scss" scoped>

	.cool-component-wrapper {
		/* TODO */
	}

</style>

<script src="./index.js"></script>

event-bus-plugin.js

import Vue from 'vue';

const bus = new Vue();

export default {
	install(Vue) {

		Object.defineProperties(Vue.prototype, {
			$bus: {
				get: () => bus
			}
		});

	}
};

http-plugin.js

import axios from 'axios';

export default {
	install(Vue, options) {

		const Http = (Vue, options) => {

			const Axios = axios.create(options);

			Axios.interceptors.request.use((config) => {

				config.startTime = new Date().getTime();

				Vue.$bus.$emit('loader:toggle', true);

				return config;

			}, (error) => Promise.reject(error));

			Axios.interceptors.response.use((response) => {

				response.config.endTime = new Date().getTime();

				Vue.$bus.$emit('loader:toggle', false);

				return response;

			}, (error) => {

				Vue.$bus.$emit('loader:toggle', false);

				return Promise.reject(error);

			});

			return Axios;

		};

		Object.defineProperties(Vue.prototype, {
			$http: {
				get: () => Http(Vue.prototype, options)
			}
		});

	}
};

index.class.js

import Vue from 'vue';
import Component from 'vue-class-component';
import { mapGetters, mapState, mapActions } from 'vuex';

@Component({
	props: {
		// TODO
	},
	computed: {
		...mapGetters([
			// TODO
		]),
		...mapState([
			// TODO
		]),
		prop: {
			get: () => 'computed `prop` getter',
			set: () => 'computed `prop` setter'
		}
	},
	methods: mapActions([
		// TODO
	]),
	components: {
		// TODO
	}
})
export default class CoolComponent extends Vue {

	// Lifecycle
	beforeCreate() {
		// TODO
	}

	created() {
		// TODO
	}

	beforeMount() {
		// TODO
	}

	mounted() {
		// TODO
	}

	beforeUpdate() {
		// TODO
	}

	updated() {
		// TODO
	}

	beforeDestroy() {
		// TODO
	}

	destroyed() {
		// TODO
	}

};

index.js

import {
    mapGetters,
    mapState,
    mapActions
} from 'vuex';

import store from './store';

export default {
    ...store,
    name: 'CoolComponent',
    props: {
        // TODO
    },
    data: () => ({
        // TODO
    }),
    computed: {
        ...mapGetters([
            // TODO
        ]),
        ...mapState([
            // TODO
        ]),
        prop: {
            get: () => 'computed `prop` getter',
            set: () => 'computed `prop` setter'
        }
    },
    components: {
        // TODO
    },
    watch: {
        // TODO
    },
    methods: {
        ...mapActions([
            // TODO
        ])
    },
    beforeCreate() {
        // TODO
    },
    created() {
        // TODO
    },
    beforeMount() {
        // TODO
    },
    mounted() {
        // TODO
    },
    beforeUpdate() {
        // TODO
    },
    updated() {
        // TODO
    },
    beforeDestroy() {
        // TODO
    },
    destroyed() {
        // TODO
    }
};

store.js

export default {
	state: {},
	getters: {},
	mutations: {},
	actions: {}
};

template-plugin.js

export default {
	install(Vue, options) {

		// global method or property
		Vue.myGlobalMethod = () => {
			// something logic ...
		};

		//  global asset
		Vue.directive('my-directive', {
			bind(el, binding, vnode, oldVnode) {
				// something logic ...
			}
		});

		// some component options
		Vue.mixin({
			created() {
				// something logic ...
			}
		})

		// instance method
		Object.defineProperties(Vue.prototype, {
			$myMethod: {
				get: (methodOptions) => {
					// something logic ...
				}
			}
		});

	}
};