Vue UUID
Add UUID to Vue instance.
Install
Installation is very easy, you just need to install using NPM or Yarn.
npm i vue-uuidVue's use method will do the trick adding to Vue.
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.
<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>