# vue-uuid

> Add UUID to Vue instance.

Latest version **3.0.0** (published 2022-02-10) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-02-10 |
| First published | 2017-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 74 |
| Author | Vitor Luiz Cavalcanti |
| Maintainers | vitorluizc |
| Keywords | vue, vue-uuid, uuid |

## Links

- npm: https://www.npmjs.com/package/vue-uuid
- Repository: https://github.com/VitorLuizC/vue-uuid
- Homepage: https://github.com/VitorLuizC/vue-uuid#README
- Issues: https://github.com/VitorLuizC/vue-uuid/issues
- npm.io page: https://npm.io/package/vue-uuid

## Dependencies (2)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [@types/uuid](https://npm.io/package/@types/uuid.md) ^8.3.4

## Recent versions

- 3.0.0 (latest) — 2022-02-10
- 2.1.0 — 2022-02-10
- 2.0.2 — 2020-06-02
- 2.0.1 — 2020-06-02
- 2.0.0 — 2020-06-02
- 1.1.1 — 2018-10-31
- 1.1.0 — 2018-10-30
- 1.0.0 — 2017-11-22
- 0.1.2 — 2017-10-27
- 0.1.0 — 2017-10-27

## README

# Vue UUID

Add UUID to Vue instance.

[![Build Status](https://travis-ci.org/VitorLuizC/vue-uuid.svg?branch=master)](https://travis-ci.org/VitorLuizC/vue-uuid)

## Install

Installation is very easy, you just need to install using NPM or Yarn.

```sh
npm i vue-uuid
```

Vue's `use` method will do the trick adding to Vue.

```js
import { createApp } from "vue";
import withUUID from "vue-uuid";

const app = withUUID(
  createApp({
    // ...
  }),
);
```

## Usage

After installation `$uuid` is available on instance, so you can use inside
components **template** and script, like the example below.

```vue
<template>
  <div class="uuid-panel">
    <h3 class="uuid">{{ uuid }}</h3>
    <button
      class="button"
      @click="uuid = $uuid.v1()"
    >Generate V1</button>
    <button
      class="button"
      @click="uuid = $uuid.v3()"
    >Generate V3</button>
    <button
      class="button"
      @click="uuid = $uuid.v4()"
    >Generate V4</button>
    <button
      class="button"
      @click="uuid = $uuid.v5("Name 1", NAMESPACE)"
    >Generate V5</button>
  </div>
</template>

<script>
  import { uuid } from 'vue-uuid'; // uuid object is also exported to things
                                   // outside Vue instance.

  const NAMESPACE = "65f9af5d-f23f-4065-ac85-da725569fdcd";

  export default {
    data () {
      return {
        NAMESPACE,
        uuid: uuid.v1(),
        v1: this.$uuid.v1(),
        v3: this.$uuid.v3(),
        v4: this.$uuid.v4(),
        v5: this.$uuid.v5("Name 2", NAMESPACE)
      };
    }
  };
</script>
```

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