Nuxt3でsocket.ioを使うのなんとなくのまとめ

はじめに

vite + express + socket.ioの構成で製作していました。
nuxt3 + socekt.ioの構成したいと思い立つ。
2024/05/21現在のなんとなくのまとめ。

検索するとnuxt3 + express + socket.ioの構成。
確かにいいんだけど、簡単でシンプルにnuxt3 + socekt.ioだけで構成がしたい。

開発環境
windows10
node 18.xx
yarn 1.xx

nuxt-socekt-ioを使う

nuxt-socekt-ioなる便利ライブラリーが公開されていました。
構築するとするりと動き、dev上ではいい感じでしたが、
しかし、buildすると何故かsocket.ioの部分だけ動かない。
構成が間違っているのかもしれない。
深追いはやめそう。
vite + express + socket.ioも悪くないと自分に言い聞かせながら。

nitro + socket.io

そして時は過ぎ、ふと公式サイトをみると、

あら、こんなページあったけな。
構築すると、たしかに動きました。
いい感じです。

vuetifyがうまくdevできない。

いつも使っているvuetify3をインストール。
しかしdevしてから、ブラウザを立ち上げると以下のようなエラーが発生。

500
Cannot find module './node.js' Require stack: - F:\Users\xx\project\nuxt-app\debug

理由はわからない。
深追いはやめよう。

package.json

{
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "engine.io": "^6.5.4",
    "nuxt": "^3.11.2",
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {
    "vite-plugin-vuetify": "^2.0.3",
    "vuetify": "^3.6.6"
  }
}

quasarとの出会い。

なんとなくvuetifyとの相性が悪い気がしています。
使ったことはないのですが、quasarを使ってみました。
さらりとdev上も、buildしても動いているようです。

package.json

{
  "dependencies": {
    "@quasar/extras": "^1.16.11",
    "engine.io": "^6.5.4",
    "nuxt": "^3.11.2",
    "nuxt-quasar-ui": "^2.1.2",
    "quasar": "^2.16.4",
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5",
    "vue": "^3.4.27",
    "vue-i18n": "^9.13.1",
    "vue-router": "^4.3.2"
  }
}

結論

とりあえず、動きました。
いけそうです。
ただ、それぞれのライブラリーもアップデートでよくなる可能性もあるので、よくよく見るように。