DEV Community

loading...
Cover image for Applying slots in Vue for a Tabs component

Applying slots in Vue for a Tabs component

didof profile image Francesco Di Donato Updated on ・2 min read

I recently completed Udemy courses on Vue and Nuxt.js.
I decided to test this framework to build a Vaccine Tracker. Having a background in React, learning was smooth and natural.

An incredibly versatile element is the slot. From the first moment I wondered how they could be used for the construction of complex and at the same time versatile layouts. For example a Tabs component.


Tabs component implementation

As props it is sufficient that it receives a list of all the tabs to display.
In the state it is sufficient to keep track of the activated tab.
Finally, we need a method that is triggered when clicked on a different tab.

<script>
import Vue from 'vue'

export default Vue.extend({
  props: {
    labels: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      activeLabel: this.$props.labels[0],
    }
  },
  methods: {
    onLabelClick(label) {
      this.activeLabel = label
    },
  },
})
</script>
Enter fullscreen mode Exit fullscreen mode

So far (syntax aside) nothing different from any other framework. However, the magic happens in the template:

<template>
  <div>
    <div v-for="label in labels" :key="label" @click="onLabelClick(label)">
      {{ label }}
    </div>
    <slot :name="activeLabel">Default {{ activeLabel }}</slot>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

That's all. One iteration to show each tab. Below is a slot whose name is updating when one of the tabs is clicked.

For the purposes of this post I ignore the style. You can get fancy!


Tabs component usage

Wherever you want to use this component just do as follows:

<Tabs :labels="['one', 'two', 'three']">
          test
          <template #one>
            <div>Uno</div>
          </template>
          <template #two>
            <div>Due</div>
          </template>
          <template #three>
            <div>Tre</div>
          </template>
        </Tabs>
Enter fullscreen mode Exit fullscreen mode

Of the different templates, only the one relating to the active tab will be shown.
It's amazing how so few lines can lead to such versatile behavior.


Thanks for reading,
Repo 📑

If you like it, let's get in touch
🐙, 🐦 and 💼

Discussion (0)

pic
Editor guide