Vue Details for Vue 2

Proper support for <details> tag in Vue.js including v-model attribute.

Get Started

Using Node.js

Install package

npm install vue-details

Initialize globally

import Vue from 'vue';
import VueDetails from 'vue-details';

Vue.component('v-details', VueDetails);

or locally as shown in the example below.

Using CDN

Load script

<script src="https://cdn.jsdelivr.net/npm/vue-details"></script>

or

<script src="https://unpkg.com/vue-details/dist/vue-details.min.js"></script>

Register component

Vue.component('v-details', VueDetails);

An Example

Try it Online

• Codepen

Code in a .vue File

<template>
  <v-details v-model="open">
    <summary>
      Content is {{ open ? 'shown' : 'hidden' }}
    </summary>
    <p>
      Expandable content
    </p>
  </v-details>
</template>

<script>
import VueDetails from 'vue-details';

export default {
  data() {
    return {
      open: true
    }
  },
  components: { 'v-details': VueDetails }
}
</script>