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

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

手順は3つだけです。npm install uuidでパッケージを入れ、import { v4 as uuidv4 } from 'uuid'で読み込み、uuidv4()を呼ぶと"9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"のような文字列が返ります。Nuxt.jsに限らず、Vue.jsや素のJavaScriptでも同じ書き方です。

パッケージを増やしたくない場合は、ブラウザとNode.js（v19以降）に標準で用意されているcrypto.randomUUID()でもv4形式のUUIDを生成できます。ブラウザではHTTPSかlocalhostでしか使えない点だけ注意してください。

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

node_modulesでuuidを確認

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

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

npm install uuid

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

Nuxt.jsでは他の依存パッケージ経由でnode_modulesに入っていることがあります。ただし自分のコードからimportするなら、package.jsonに明示するためにもインストールしておくのが確実です。

v4をインポートする

import { v4 as uuidv4 } from 'uuid'

scriptタグで使う

以下はOptions API（Nuxt 2）の例です。Nuxt 3の<script setup>でも、importとuuidv4()の呼び出しは同じです。

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

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

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

uuidv4()

firebaseなどでdocumentのidとして利用できます。作成日をあわせて保存する場合の表示整形は、Nuxt.jsで日付をフォーマットする方法を参考にしてください。

  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) {})
      }
    },
...

うまく動かないとき

Cannot find module 'uuid'と出る場合は、インストール先のプロジェクトが違うか、devサーバーを再起動していないことがほとんどです。package.jsonのdependenciesにuuidがあるか確認し、npm installのあとにサーバーを起動し直してください。

importしたのにuuidv4 is not a functionになる場合は、古い書き方のimport uuidv4 from 'uuid/v4'が残っていないか確認します。現在のuuidパッケージはこのパスを提供していないため、上で紹介したimport { v4 as uuidv4 } from 'uuid'に直します。

assets配下のCSSを全ページに適用する設定はNuxt.jsでassetsのcssをグローバルに適用する方法で扱っています。