# Nuxt
# Import RouterTab
# Plugin
plugins/routerTab.js
import Vue from 'vue'
import RouterTab from 'vue-router-tab'
import 'vue-router-tab/dist/lib/vue-router-tab.css'
Vue.use(RouterTab)
1
2
3
4
5
2
3
4
5
# Iframe Page
pages/-Iframe.js
export { Iframe as default } from 'vue-router-tab'
1
# Nuxt Config
nuxt.config.js
export default {
// import routerTab plugin
plugins: ['@/plugins/routerTab'],
router: {
extendRoutes(routes, resolve) {
// add Iframe route
routes.push({
name: 'iframe',
path: '/iframe/:src/:title?/:icon?',
component: resolve(__dirname, 'pages/-Iframe.js'),
props: true
})
}
},
build: {
// Babel transpile dependencies
transpile: ['vue-router-tab']
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Use Component
More props at RouterTab Props
WARNING
RouterTab only supports singleton mode, do not introduce multiple RouterTab components in the same page!
layouts/default.vue
<template>
<div class="app-header">Header</div>
<div class="app-body">
<div class="app-side">Side</div>
<router-tab />
</div>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
# Tab Config
# Page Meta
pages/about.vue
<template>
<h2>About</h2>
</template>
<script>
export default {
meta: {
title: 'About',
closable: false
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 👨💻 Sample Project
router-tab-nuxt-sample