Nuxt.jsでuuid(v4)を使う方法

2021年5月11日Vue.js

Nuxt.jsでuuid(v4)を使う方法です。

Nuxt.jsでuuid(v4)を使う方法

node_moduleでuuidを確認

uuidが含まれていれば、下のインポートから始めます。

node_moduleに含まれていない場合、

npm install uuid

https://www.npmjs.com/package/uuid

Nuxt.jsの場合はnode_moduleに含まれている場合があるので確認しましょう。

v4をインポートする

import { v4 as uuidv4 } from 'uuid'

scriptタグで使う

まずはdata()で初期値を設定します。

  data() {
    return {
      board: {
          uuid: '',
        }
      },
    }
  },

uuidv4を生成するには、次のようにします。

uuidv4()

firebaseなどでdocumentのidとして利用したりできます。

  methods: {
    addBoard() {
      // uuidを作成
      this.currentImageId = uuidv4()
      this.dialog = true
    },
    createBoard() {
      let that = this
      if (this.$refs.form.validate()) {
        // 作成日を作成
        this.board.dateCreated = Date.now()
        this.$fire.firestore
        .collection('users')
        .doc(this.$fire.auth.currentUser.uid)
        .collection('boards')
        .doc(this.currentImageId)
        .set(this.board)
        .then(function (docRef) {
          that.dialog = false
          that.$refs.form.reset()
          that.snackbarText = 'ボードが作成されました'
          that.snackbar = true
        })
        .catch(function (error) {})
      }
    },
...