vue-tabs-router

A Vue2 router implementation for vue-tabs-chrome. vue-tabs-chrome is a brilliant package for chrome-like tabs :heart_eyes:.

This packages takes it a bit to the next level by providing a router component for your application.

:green_heart: Features

• Persistent tabs
• Custom router-view for rendering pages within tabs
• Configurable tab icons (favicon)

Installation

npm i @moirei/vue-tabs-router

Configure the plugin

See extended example.

import Vue from 'vue'
import store from './store'
import VueTabsRouter from '@moirei/vue-tabs-router'

Vue.use(VueTabsRouter, { store })

Use the router component

<template>
  <v-app id="app">
    <v-main>
      <!-- Comment out nuxt or router-view -->
      <!-- <v-container>
        <nuxt />
      </v-container> -->
      <tabs-router-view
        :dark="isDark"
        container="v-container"
      />
    </v-main>
  </v-app>
</template>

...

Nuxt

// @/plugins/tabs-router-view.js

import Vue from 'vue'
import VueTabsRouter from '@moirei/vue-tabs-router'

export default ({ app }) => {
  Vue.use(VueTabsRouter, { store: app.store })
}

See extended example configuration for Nuxt.

Usage

Using the directive

This will open the route page in a new tab

<v-btn
    icon
    v-tabs-route="{
      label: 'Settings',
      to: { name: 'settings' },
    }"
  >
  <v-icon small>settings</v-icon>
</v-btn>

Using the plugin

this.$tabs.to({
    label: 'Settings',
    to: { name: 'settings' },
})

See all tab options.

Plugin API

See all the package's API.

Dependencies

• vue-router: You'll need vue-router installed and configured.
• vuex

Caveats

• Not tested for server-side rendering

Credits

• Augustus Okoye

License

MIT