はじめに
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"
}
}
結論
とりあえず、動きました。
いけそうです。
ただ、それぞれのライブラリーもアップデートでよくなる可能性もあるので、よくよく見るように。