# vue3-uuid

> Add UUID to Vue instance.

Latest version **1.0.0** (published 2021-12-20) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-12-20 |
| First published | 2021-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | wang90 |
| Maintainers | wang90 |
| Keywords | vue3, vue3-uuid, uuid |

## Links

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

## Dependencies (2)

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

## 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

- 1.0.0 (latest) — 2021-12-20

## README

# Vue UUID


## Background
因为在使用 vue-uuid 在 vue3 项目中会报错，果断修改原仓库    

[感谢🙏仓库原作者](https://github.com/VitorLuizC/vue-uuid)

Add UUID to Vue instance.


## Install

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

```sh
npm i vue3-uuid
```

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

```js
import { createApp } from 'vue'
import App from './App.vue'
import UUID from "vue3-uuid";
const app = createApp(App)
app.use(UUID)

```

## Usage

```vue
<template>
  <div class="uuid-panel">
    <h3 class="uuid">{{ UUID }}</h3>
    <button
      class="button"
      @click="choose"
    >Generate V1</button>
    <button
      class="button"
      @click="choose(3)"
    >Generate V3</button>
    <button
      class="button"
      @click="choose(4)"
    >Generate V4</button>
    <button
      class="button"
      @click="choose(5)"
    >Generate V5</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { uuid } from 'vue-uuid';
  const NAMESPACE = "65f9af5d-f23f-4065-ac85-da725569fdcd";

  const UUID = ref(null);
  const choose = ( type ) => {
    if ( type === 3 ) {
      UUID.value =  uuid.v3();
    } else if ( type === 4) {
      UUID.value = uuid.v4();
    } else if ( type === 5 ) {
      UUID.value = uuid.v5("Name 1", NAMESPACE);
    } else {
       UNID.value = uuid.v1();
    }
  }
</script>
```

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