vue-tabpage

A vue-cli project, it extends a example from https://jsfiddle.net/chrisvfritz/Lp20op9o/

preview

• easy to make a tabpage!

There is also a React demo like this:
react-tabpage

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Details

TabRouter.vue

<template>
  <div>
    <button v-for="tab in tabs"
            :key="tab"
            :class="['tab-button', { active: currentTab === tab}]"
            :style="{ width: widthData }"
            @click="currentTab=tab">{{ tab }}</button>
    <slot :currentTab="currentTab"></slot>
  </div>
</template>

<script>
export default {
  props: {
    tabs: Array
  },
  data() {
    return {
      // default tab
      currentTab: this.tabs[0]
    }
  },
  computed: {
    widthData() {
      return 100 / this.tabs.length + '%'
    }
  }
}
</script>

App.vue

<template>
  <main-layout>
    <center>
      <tab-router :tabs="['Home', 'Project', 'About']">
        <template slot-scope="TabRouter">
          <component :is="TabRouter.currentTab"
                     :home="home"
                     :projects="project"
                     :about="about"></component>
        </template>
      </tab-router>
    </center>
  </main-layout>
</template>

<script>
import MainLayout from './layouts/Main'
import TabRouter from './components/TabRouter'
import Home from './pages/Home'
import Project from './pages/Project'
import About from './pages/About'

export default {
  components: {
    MainLayout,
    TabRouter,
    Home,
    Project,
    About
  },
  data() {
    return {
      index: require('./common/json/data.json')
    }
  },
  computed: {
    home() {
      return this.index.home
    },
    project() {
      return this.index.project
    },
    about() {
      return this.index.project
    }
  }
}
</script>

Home.vue

<template>
  <mainLayout>
    <p>{{title}}</p>
    <img :src="logo" />
    <p>{{author}}</p>
    <p>{{readME}}</p>
    <group :items="websites"
           :width="90"
           :fontSize="32"></group>
  </mainLayout>
</template>

<script>
import mainLayout from '../layouts/Main'
import group from '../components/Group'

export default {
  components: {
    mainLayout,
    group
  },
  props: ['home'],
  computed: {
    title() {
      return this.home.title
    },
    logo() {
      return this.home.logo
    },
    author() {
      return this.home.author
    },
    readME() {
      return this.home.readME
    },
    websites() {
      return this.home.websites
    }
  }
}
</script>

More pages just like this and the App will import them to use tabs to play.

...