reusable tabs component

Tabs component

Dynamic component *script setup*

Pinia’s success can be attributed to its unique features (extensibility, store module organization, grouping of state changes, multiple stores creation, and so on) for managing stored data.

  
// stores/todo.js
import { defineStore } from 'pinia'

export const useTodoStore = defineStore({
  id: 'todo',
  state: () => ({ count: 0, title: "Cook noodles", done:false })
})

the code…

// Tabs.vue
<script lang='ts' setup>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'

const currentActive = ref<Object | null>(null)
const isActive = (tab: Object) => currentActive.value === tab ? 'isActive' : null
const changeTab = (tab: Object) => {
  currentActive.value = markRaw(tab)
  // performance wise, use markRaw
}

changeTab(Tab1) // initial active Tab

</script>

<template>
  <button :class="isActive(Tab1)" @click="changeTab(Tab1)">
    Pinia
  </button>
  <button :class="isActive(Tab2)" @click="changeTab(Tab2)">
    Vuex
  </button>
  <div class="content">
    <component
      :is="currentActive"
      v-motion-fade
    ></component>
  </div>
</template>