vitorluizc / vue-uuid Goto Github PK

View Code? Open in Web Editor NEW

73.0 3.0 7.0 1.02 MB

Add UUID to Vue instance.

License: MIT License

JavaScript 100.00%

vue-uuid uuid vue-plugin vue javascript

vue-uuid's Introduction

Vue UUID

Add UUID to Vue instance.

Install

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

npm i vue-uuid

Vue'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>

vue-uuid's People

Contributors

Stargazers

Watchers

Forkers

yashiroiori bsor-dev dschniepp martinma mihaileu wang90

vue-uuid's Issues

v5() not working without additional params?

Using the testcode, I can get v1() and v4() to work, but v5() raises two errors:

value must be an array of bytes
then:
namespace must be uuid string or an Array of 16 byte values

If I pass two parameters as above, it works. Is this something I'm doing wrong, or does the test.js code need the params added?

Types definition

Hi, Vitor!

I ran into problems with this package while using the latest types definition for uuid from DefinitelyTyped.

You can find more details here:
DefinitelyTyped/DefinitelyTyped#42634 (comment)

Confused at the readme.md's suggestion to use 'use'.

Thanks for the work on an awesome Vue package!

The project's readme.md file denotes:

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

Yet, the example code below distinctly doesn't actually use Vue's use method. Is there a way to use the use method to include this package?

Vue 3 compatibility

Is there any pan to make this component available for vue 3 ?

possible to support uuid 1 - 4/5?

/** Feature Request */

Might it be possible to support different versions of uuid?

Like https://www.npmjs.com/package/uuid does?

Thanks so much for this package either way <3

Import Specific Version

I want to use v4() globally in my Vue app. Is there a way to import this so that the $uuid default is the same thing as using $uuid.v4() but without having to remember the .v4() everywhere?

Thanks!

A little more information

I am having trouble understanding what this package does or what it prevents from docs. Can you explain please?

Got error "Uncaught TypeError: Cannot set properties of undefined (setting '$uuid')" while trying to use package in nuxt

I have the package installed and created a custom plugin file for it and added it to my plugins array in the nuxt.config.js file. After importing it into the component I intend to use it on I am getting an error.

Hovering over the underlined part reveals "Uncaught TypeError: Cannot set properties of undefined (setting '$uuid')"

In certain contexts using uuid.v4() creates an endless loop

We are using vue-uuid in 2 different apps and overall use is great but we have 2 contexts so far, I'm confirming if there are more, that create endless loops using uuid.v4(). not certain why this is.
For context here are the v-tabs we are using that use v-for and a key:
<v-tabs class="wegive-header-tabs mb-2 mt-n5" mandatory hide-slider v-model="tab" :show-arrows="$vuetify.breakpoint.mobile" center-active > <v-spacer /> <v-tab class="tab-hover mx-1" v-for="(item, index) in years" :key="$uuid.v4(index)" ><span style="font-weight: normal; line-height: 1" class="text-on-tab" > {{ item }}</span > </v-tab>  </v-tabs>
this is all inside a component which contains graph data and is rendered inside a Home copmonent.