open-index/open-npm huggingface dataset:
npm package: @moreillon/vue_group_picker
Description: [![npm version](https://badge.fury.io/js/@moreillon%2Fvue_group_picker.svg)](https://badge.fury.io/js/@moreillon%2Fvue_group_picker)
Author: Maxime Moreillon
Latest version: 5.0.12

# Group picker

[![npm version](https://badge.fury.io/js/@moreillon%2Fvue_group_picker.svg)](https://badge.fury.io/js/@moreillon%2Fvue_group_picker)

A Vue.js component to select a group from those managed by the [group management microservice](https://github.com/maximemoreillon/group_manager)

## Usage

```
<template>
  <div id="app">
    <GroupPicker
      @selection="selected($event)"
      groupManagerApiUrl="http://api.groups.example.com"/>
  </div>
</template>

<script>
import GroupPicker from '@moreillon/vue_group_picker'

export default {
  name: 'App',
  components: {
    GroupPicker
  },
  methods: {
    selected({ _id}){
      alert(`You selected group ${_id}`)
    }
  }
}
</script>
```
npm package: @moreillon/vue_loader
Description: A simple loader for Vue.js applications
Author: Maxime Moreillon
Latest version: 1.0.5

# Vue loader
A simple loader for Vue.js applications

## Usage
```vue
<template>
  <Loader>Loading...</Loader>
</template>

<script>
import Loader from '@moreillon/Loader.vue'

export default {
  name: 'my_component',
  components: { Loader }
}
</script>
```
npm package: @moreillon/vue_modal
Description: This is a modal component for Vue.js.
Author: Maxime Moreillon
Latest version: 0.1.3

# Vue Modal

This is a modal component for Vue.js.

## Usage

```
<template>
  <div>

    <h1>Modal</h1>

    <button
      type="button" @click="open = !open">
      Open modal
    </button>

    <Modal
      @close="open = false"
      :open="open">
      <h2>Modal</h2>
      <p>
        This is the modal content.
      </p>
    </Modal>

  </div>
</template>

<script>
import Modal from '@moreillon/vue_modal'

export default {
  name: 'app',
  components: {
    Modal
  },
  data(){
    return{
      open: false
    }
  }
}
</script>
```
npm package: @moreillon/vue_user_picker
Description: [![npm version](https://badge.fury.io/js/@moreillon%2Fvue_user_picker.svg)](https://badge.fury.io/js/@moreillon%2Fvue_user_picker)
Author: Maxime Moreillon
Latest version: 5.0.10

# User picker

[![npm version](https://badge.fury.io/js/@moreillon%2Fvue_user_picker.svg)](https://badge.fury.io/js/@moreillon%2Fvue_user_picker)

A Vue.js component to select members from groups managed by the [group management microservice](https://github.com/maximemoreillon/group_manager)

## Usage

```
<template>
  <div id="app">
    <UserPicker
      :groupManagerApiUrl="https://api.groups.example.com"
      @selection="selection($event)"/>
  </div>
</template>

<script>
import UserPicker from '@moreillon/vue_user_picker'

export default {
  name: 'App',
  components: {
    UserPicker
  },
  methods: {
    selection({display_name}){
      alert(`You clicked ${display_name}`)
    }
  }
}
</script>
```