# vue-uid

> Unique ID for Vue.js component.

Latest version **0.4.5** (published 2019-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-uid
pnpm add vue-uid
yarn add vue-uid
bun add vue-uid
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.5 |
| Published | 2019-10-21 |
| First published | 2018-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 189 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | mya-ake |
| Maintainers | mya-ake |
| Keywords | vue.js, uid, vue-uid |

## Links

- npm: https://www.npmjs.com/package/vue-uid
- Repository: https://github.com/mya-ake/vue-uid
- Issues: https://github.com/mya-ake/vue-uid/issues
- npm.io page: https://npm.io/package/vue-uid

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.4.5 (latest) — 2019-10-21
- 0.4.4 — 2019-01-22
- 0.4.3 — 2019-01-22
- 0.4.2 — 2018-11-25
- 0.4.1 — 2018-11-25
- 0.4.0 — 2018-11-25
- 0.3.2 — 2018-11-16
- 0.3.1 — 2018-11-16
- 0.3.0 — 2018-11-16
- 0.2.0 — 2018-11-16

## README

# vue-uid

[![npm version](https://badge.fury.io/js/vue-uid.svg)](https://badge.fury.io/js/vue-uid)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

Unique ID for Vue.js component.


## Install

```bash
$ yarn add vue-uid
```

## Usage

[Plugin](#Plugin) or [Mixin](#Mixin).

Plugin all components have uid.

Components with mixin have uid.
Other components don't have uid.

### Plugin

Install plugin

```JavaScript
import Vue from 'vue';
import VueUid from 'vue-uid';
 
Vue.use(VueUid);
```

Use with component

```HTML
<template>
  <div>
    <div>
      <label v-bind:for="`input-${$_uid}`">Name</label>
      <input v-bind:id="`input-${$_uid}`" />
    </div>
    or
    <div>
      <label v-bind:for="id">Name</label>
      <input v-bind:id="id" />
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return `input-${this.$_uid}`;  // e.g. input-1
    },
  },
};
</script>
```

### Mixin

Use with component

```HTML
<template>
  <input v-bind:id="`input-${$_uid}`" />
</template>

<script>
import { vueUidMixin } from 'vue-uid';

export default {
  mixins: [vueUidMixin],

  mounted() {
    const uid = this.$_uid;
    console.log(uid); // 1 (Number)
  },
};
</script>
```

## Options

### `name` (option)

- type: `String`
- default: `$_uid`

Change property name.

e.g.

```JavaScript
import Vue from 'vue';
import VueUid from 'vue-uid';

Vue.use(VueUid, {
  name: 'uid',
});
```

when

```HTML
<template>
  <div>
    <div>
      <label v-bind:for="`input-${uid}`">Name</label>
      <input v-bind:id="`input-${uid}`" />
    </div>
    or
    <div>
      <label v-bind:for="id">Name</label>
      <input v-bind:id="id" />
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      // change property name
      return `input-${this.uid}`;  // e.g. input-1
    },
  },
};
```

## Public API

### `reset()`

Rest UID count.

```JavaScript
import { uid } from 'vue-uid';

uid.reset();
```

### `setName(name: String)`

Same as name option.
This method is for mixin.


```JavaScript
import { uid } from 'vue-uid';

uid.setName('uid');
```

## For Nuxt.js

[nuxt-uid-module](https://github.com/mya-ake/nuxt-uid-module)

## Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an [issue](https://github.com/mya-ake/vue-uid/issues) or a [pull request](https://github.com/mya-ake/vue-uid/pulls).

## License

[MIT](https://github.com/mya-ake/vue-uid/blob/master/LICENSE)

---
_Source: https://npm.io/package/vue-uid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._