[vue] [nuxt] [component] Vue Simple Accordion

AppAccordion.vue

<template>
  <transition
    name="slide"
    @before-enter="(el) => (el.style.height = '0')"
    @enter="(el) => (el.style.height = el.scrollHeight + 'px')"
    @before-leave="(el) => (el.style.height = el.scrollHeight + 'px')"
    @leave="(el) => (el.style.height = '0')"
  >
    <div v-if="isOpened" class="slide-body">
      <slot />
    </div>
  </transition>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    isOpened: {
      type: Boolean,
      required: true,
    },
  },
})
</script>

<style>
.slide-body {
  overflow: hidden;
  transition: 120ms ease-out;
}
</style>