From be2da4e4dc472400c47b7c943c93f7548d811570 Mon Sep 17 00:00:00 2001 From: Damien Arrachequesne Date: Fri, 29 Mar 2024 10:00:23 +0100 Subject: [PATCH] docs: add example with Nuxt --- .github/workflows/ci.yml | 1 + examples/nuxt-example/.gitignore | 24 ++++++ examples/nuxt-example/README.md | 75 ++++++++++++++++++ examples/nuxt-example/app.vue | 5 ++ .../components/Connection.client.vue | 40 ++++++++++ examples/nuxt-example/components/socket.ts | 3 + examples/nuxt-example/nuxt.config.ts | 12 +++ examples/nuxt-example/package.json | 19 +++++ examples/nuxt-example/public/favicon.ico | Bin 0 -> 4286 bytes .../nuxt-example/server/plugins/socket.io.ts | 37 +++++++++ examples/nuxt-example/server/tsconfig.json | 3 + examples/nuxt-example/tsconfig.json | 4 + 12 files changed, 223 insertions(+) create mode 100644 examples/nuxt-example/.gitignore create mode 100644 examples/nuxt-example/README.md create mode 100644 examples/nuxt-example/app.vue create mode 100644 examples/nuxt-example/components/Connection.client.vue create mode 100644 examples/nuxt-example/components/socket.ts create mode 100644 examples/nuxt-example/nuxt.config.ts create mode 100644 examples/nuxt-example/package.json create mode 100644 examples/nuxt-example/public/favicon.ico create mode 100644 examples/nuxt-example/server/plugins/socket.io.ts create mode 100644 examples/nuxt-example/server/tsconfig.json create mode 100644 examples/nuxt-example/tsconfig.json diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6ce67859c7..b7106dadda 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -57,6 +57,7 @@ jobs: - basic-crud-application/vue-client - nextjs-pages-router - nextjs-app-router + - nuxt-example steps: - name: Checkout repository diff --git a/examples/nuxt-example/.gitignore b/examples/nuxt-example/.gitignore new file mode 100644 index 0000000000..4a7f73a2ed --- /dev/null +++ b/examples/nuxt-example/.gitignore @@ -0,0 +1,24 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example diff --git a/examples/nuxt-example/README.md b/examples/nuxt-example/README.md new file mode 100644 index 0000000000..f5db2a2dbf --- /dev/null +++ b/examples/nuxt-example/README.md @@ -0,0 +1,75 @@ +# Nuxt 3 Minimal Starter + +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/examples/nuxt-example/app.vue b/examples/nuxt-example/app.vue new file mode 100644 index 0000000000..93db8403f0 --- /dev/null +++ b/examples/nuxt-example/app.vue @@ -0,0 +1,5 @@ + diff --git a/examples/nuxt-example/components/Connection.client.vue b/examples/nuxt-example/components/Connection.client.vue new file mode 100644 index 0000000000..9ed94b6c5c --- /dev/null +++ b/examples/nuxt-example/components/Connection.client.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/nuxt-example/components/socket.ts b/examples/nuxt-example/components/socket.ts new file mode 100644 index 0000000000..779a08af2a --- /dev/null +++ b/examples/nuxt-example/components/socket.ts @@ -0,0 +1,3 @@ +import { io } from "socket.io-client"; + +export const socket = io(); diff --git a/examples/nuxt-example/nuxt.config.ts b/examples/nuxt-example/nuxt.config.ts new file mode 100644 index 0000000000..6405a8b2a3 --- /dev/null +++ b/examples/nuxt-example/nuxt.config.ts @@ -0,0 +1,12 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config + +export default defineNuxtConfig({ + devtools: { + enabled: true + }, + nitro: { + experimental: { + websocket: true + }, + } +}) diff --git a/examples/nuxt-example/package.json b/examples/nuxt-example/package.json new file mode 100644 index 0000000000..6db78f26ef --- /dev/null +++ b/examples/nuxt-example/package.json @@ -0,0 +1,19 @@ +{ + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" + }, + "dependencies": { + "nuxt": "^3.11.1", + "socket.io": "^4.7.5", + "socket.io-client": "^4.7.5", + "vue": "^3.4.21", + "vue-router": "^4.3.0" + } +} diff --git a/examples/nuxt-example/public/favicon.ico b/examples/nuxt-example/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c GIT binary patch literal 4286 zcmeHLOKuuL5PjK%MHWVi6lD zOGiREbCw`xmFozJ^aNatJY>w+g ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8 zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^ z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&wcHSn81VH1N~`0gvwH{ z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e { + const engine = new Engine(); + const io = new Server(); + + io.bind(engine); + + io.on("connection", (socket) => { + // ... + }); + + nitroApp.router.use("/socket.io/", defineEventHandler({ + handler(event) { + engine.handleRequest(event.node.req, event.node.res); + event._handled = true; + }, + websocket: { + open(peer) { + const nodeContext = peer.ctx.node; + const req = nodeContext.req; + + // @ts-expect-error private method + engine.prepare(req); + + const rawSocket = nodeContext.req.socket; + const websocket = nodeContext.ws; + + // @ts-expect-error private method + engine.onWebSocket(req, rawSocket, websocket); + } + } + })); +}); diff --git a/examples/nuxt-example/server/tsconfig.json b/examples/nuxt-example/server/tsconfig.json new file mode 100644 index 0000000000..b9ed69c19e --- /dev/null +++ b/examples/nuxt-example/server/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../.nuxt/tsconfig.server.json" +} diff --git a/examples/nuxt-example/tsconfig.json b/examples/nuxt-example/tsconfig.json new file mode 100644 index 0000000000..a746f2a70c --- /dev/null +++ b/examples/nuxt-example/tsconfig.json @@ -0,0 +1,4 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "extends": "./.nuxt/tsconfig.json" +}