Simple, flexible tabs

example.vue

<template>
	<Tabs initialTab="login">
			<TabNav tabId="login">
				<template scope="{active, selectTab}">
					<a>Login</a>
				</template>
			</TabNav>
			<TabNav tabId="register">
				<template scope="{active, selectTab}">
					<a>Registration</a>
				</template>
			</TabNav>
			<TabNav tabId="forgot">
				<template scope="{active, selectTab}">
					<a>Forgot Password</a>
				</template>
			</TabNav>
		<TabPanel tabId="login">
			Login Panel
		</TabPanel>
		<TabPanel tabId="register">
			Register Panel
		</TabPanel>
		<TabPanel tabId="forgot">
			Forgot Password panel
		</TabPanel>
	</Tabs>
</template>

index.js

import Tabs from './Tabs';
import TabNav from './TabNav';
import TabPanel from './TabPanel';

export { Tabs, TabNav, TabPanel };

TabNav.js

import set from 'lodash/set';

export default {
	props: ['tabId'],
	inject: ['tabs'],
	render (h) {
		const vnodes = this.$scopedSlots.default({
			active: this.tabs.tabData.activeTab === this.tabId
		});

		const vnode = vnodes.length > 1
			? h('div', [vnodes])
			: vnodes[0];

		set(vnode, 'data.on.click', () => this.tabs.selectTab(this.tabId));
		set(vnode, 'data.nativeOn.click', () => this.tabs.selectTab(this.tabId));

		return vnode;
	}
};

TabPanel.js

export default {
	props: ['tabId'],
	inject: ['tabs'],
	render (h) {
		if (this.tabId !== this.tabs.tabData.activeTab) {
			return null;
		}

		const vnodes = this.$slots.default;

		const vnode = vnodes.length > 1
			? h('div', [vnodes])
			: vnodes[0];

		return vnode;
	}
};

Tabs.js

export default {
	props: ['initialTab'],
	data () {
		return {
			tabData: {
				activeTab: this.initialTab
			}
		};
	},
	provide () {
		return {
			tabs: {
				selectTab: this.selectTab,
				tabData: this.tabData
			}
		};
	},
	methods: {
		selectTab (tab) {
			this.tabData.activeTab = tab;
		}
	},
	render (h) {
		return h('div', [this.$slots.default]);
	}
};