vue-details

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-details
501.0.94 years ago5 years agoMinified + gzip package size for vue-details in KB

Readme

npm version
Vue Details
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

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>