Vuejs Generate Unique Identifier UUID or GUID with example
In this blog post, We are going to learn how to generate UUID or GUID in the vuejs application with examples.
You can check my previous posts
- guide to GUID, UUID, UDID in javascript.
- how to generate GUID in java
- React GUID generate
- Angular Guid generate
Vuejs Unique Identifier introduction
Unique Identifier Generation is needed in any application of every language.
This can be used in the Database as primary keys like id in MongoDB in backend applications or you can store session-id in front-end MVC applications like Angular or vueJS.
UUID or GUID is an alias that both refer same and contains 16 bytes or 128 bits in size separated into 5 groups by hyphens.
There are different ways to create a UUID in vuejs applications
- Using existing npm packages like vue-uuid
- Custom UUID code to generate a unique id
Example for Generating Unique Identifier using the npm package
We can generate GUID in multiple ways,
vue-uuid usage example
vue-uuid
is an npm package for nodejs Applications.
First, you need to install it using the npm install command
npm install --save vue-uuid
This generates dependency in node_modules and adds an entry in the dependency section of package.json.
Import UUID module in the application UUID is a global module defined in a vue-uuid library.
Before using this global object and properties, You need to import them into your mail.js file. T
his vue-uuid is globally available by calling Vue.use with UUID main.js
import Vue from "vue";
import App from "./App.vue";
import UUID from "vue-uuid";
Vue.use(UUID);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
Once globally configured, the uuid object is available inside the template of your Vue components.
Vue Component for UUID generation In the script tag of the Vue component, First import the UUID object and call uuid.v1() returns GUID or UUID
<template>
<div id="app">
<h1 class="uuid">{{ uuid }}</h1>
</div>
</template>
<script>
import { uuid } from 'vue-uuid' // Import uuid
export default {
data () {
return {
uuid: uuid.v1(),
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Output is
1f5cdb80-cd7f-11e8-bf21-1dd90afe8dad
Custom UUID code to generate a unique id
You can copy the javascript function UUID generation code and create a method in the Vue component. display it in the template