traxxx/assets/js/main.js

import Vue from 'vue';
import VTooltip from 'v-tooltip';
import VueLazyLoad from 'vue-lazyload';
import dayjs from 'dayjs';

import router from './router';
import initStore from './store';

import initUiObservers from './ui/observers';

import '../css/style.scss';

import Container from '../components/container/container.vue';
import Icon from '../components/icon/icon.vue';

function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
	if (precision === 'year') {
		const newFormat = format.match(/Y+/);
		return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
	}

	if (precision === 'month') {
		const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
		return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
	}

	return dayjs(date).format(format);
}

function init() {
	const store = initStore(router);

	initUiObservers(store, router);

	if (window.env.sfw) {
		store.dispatch('setSfw', true);
	}

	Vue.mixin({
		components: {
			Icon,
		},
		watch: {
			pageTitle(title) {
				if (title) {
					document.title = `traxxx - ${title}`;
					return;
				}

				document.title = 'traxxx';
			},
		},
		methods: {
			formatDate,
			isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
			isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
		},
	});

	Vue.use(VTooltip, {
		popover: {
			defaultContainer: '.container',
		},
	});
	Vue.use(VueLazyLoad, {
		throttleWait: 0,
	});

	new Vue({ // eslint-disable-line no-new
		el: '#container',
		store,
		router,
		render(createElement) {
			return createElement(Container);
		},
	});
}

init();