Nascent Political Miscreant

    vue-uid
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.5 • Public • Published

    vue-uid

    npm version License: MIT

    Unique ID for Vue.js component.

    Install

    $ yarn add vue-uid

    Usage

    Plugin or Mixin.

    Plugin all components have uid.

    Components with mixin have uid. Other components don't have uid.

    Plugin

    Install plugin

    import Vue from 'vue';
    import VueUid from 'vue-uid';
     
    Vue.use(VueUid);

    Use with component

    <template>
      <div>
        <div>
          <label v-bind:for="`input-${$_uid}`">Name</label>
          <input v-bind:id="`input-${$_uid}`" />
        </div>
        or
        <div>
          <label v-bind:for="id">Name</label>
          <input v-bind:id="id" />
        </div>
      </div>
    </template>
     
    <script>
    export default {
      computed: {
        id() {
          return `input-${this.$_uid}`;  // e.g. input-1
        },
      },
    };
    </script>

    Mixin

    Use with component

    <template>
      <input v-bind:id="`input-${$_uid}`" />
    </template>
     
    <script>
    import { vueUidMixin } from 'vue-uid';
     
    export default {
      mixins: [vueUidMixin],
     
      mounted() {
        const uid = this.$_uid;
        console.log(uid); // 1 (Number)
      },
    };
    </script>

    Options

    name (option)

    • type: String
    • default: $_uid

    Change property name.

    e.g.

    import Vue from 'vue';
    import VueUid from 'vue-uid';
     
    Vue.use(VueUid, {
      name: 'uid',
    });

    when

    <template>
      <div>
        <div>
          <label v-bind:for="`input-${uid}`">Name</label>
          <input v-bind:id="`input-${uid}`" />
        </div>
        or
        <div>
          <label v-bind:for="id">Name</label>
          <input v-bind:id="id" />
        </div>
      </div>
    </template>
     
    <script>
    export default {
      computed: {
        id() {
          // change property name
          return `input-${this.uid}`;  // e.g. input-1
        },
      },
    };

    Public API

    reset()

    Rest UID count.

    import { uid } from 'vue-uid';
     
    uid.reset();

    setName(name: String)

    Same as name option. This method is for mixin.

    import { uid } from 'vue-uid';
     
    uid.setName('uid');

    For Nuxt.js

    nuxt-uid-module

    Contribution

    If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

    License

    MIT

    Install

    npm i vue-uid

    DownloadsWeekly Downloads

    595

    Version

    0.4.5

    License

    MIT

    Unpacked Size

    194 kB

    Total Files

    19

    Last publish

    Collaborators

    • mya-ake