https://github.com/kim366/vue-details

Proper support for the HTML5 <details> tag in Vue 2 including v-model attribute (<1KB)
https://github.com/kim366/vue-details

Last synced: 3 months ago
JSON representation

Proper support for the HTML5 <details> tag in Vue 2 including v-model attribute (<1KB)

• Host: GitHub
• URL: https://github.com/kim366/vue-details
• Owner: kim366
• License: mit
• Created: 2018-05-22T15:56:16.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-14T10:56:14.000Z (over 3 years ago)
• Last Synced: 2025-10-08T18:48:56.172Z (8 months ago)
• Language: JavaScript
• Homepage: https://codepen.io/kim366/pen/OZGLVY
• Size: 12.7 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/vue-details.svg)](https://www.npmjs.com/package/vue-details)

# Vue Details for Vue 2

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

## Get Started

### Using Node.js

Install package

```

npm install vue-details

```

Initialize globally

```js

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

```html

```

or

```html

```

Register component

```js

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

```

## An Example

### Try it Online

- [Codepen](https://codepen.io/kim366/pen/OZGLVY)

### Code in a `.vue` File

```vue

  

    

      Content is {{ open ? 'shown' : 'hidden' }}

    

    


      Expandable content

    

  


import VueDetails from 'vue-details';

export default {

  data() {

    return {

      open: true

    }

  },

  components: { 'v-details': VueDetails }

}

```