docs: add example with Nuxt

.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

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

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.

examples/nuxt-example/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <Connection />
+  </div>
+</template>

examples/nuxt-example/components/Connection.client.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { socket } from "./socket";
+
+const isConnected = ref(false);
+const transport = ref("N/A");
+
+if (socket.connected) {
+  onConnect();
+}
+
+function onConnect() {
+  isConnected.value = true;
+  transport.value = socket.io.engine.transport.name;
+
+  socket.io.engine.on("upgrade", (rawTransport) => {
+    transport.value = rawTransport.name;
+  });
+}
+
+function onDisconnect() {
+  isConnected.value = false;
+  transport.value = "N/A";
+}
+
+socket.on("connect", onConnect);
+socket.on("disconnect", onDisconnect);
+
+onBeforeUnmount(() => {
+  socket.off("connect", onConnect);
+  socket.off("disconnect", onDisconnect);
+});
+
+</script>
+
+<template>
+<div>
+  <p>Status: {{ isConnected ? "connected" : "disconnected" }}</p>
+  <p>Transport: {{ transport }}</p>
+</div>
+</template>

examples/nuxt-example/components/socket.ts

@@ -0,0 +1,3 @@
+import { io } from "socket.io-client";
+
+export const socket = io();

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
+    },
+  }
+})

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"
+  }
+}

examples/nuxt-example/server/plugins/socket.io.ts

@@ -0,0 +1,37 @@
+import type { NitroApp } from "nitropack";
+import { Server as Engine } from "engine.io";
+import { Server } from "socket.io";
+import { defineEventHandler } from "h3";
+
+export default defineNitroPlugin((nitroApp: NitroApp) => {
+  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);
+      }
+    }
+  }));
+});

examples/nuxt-example/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

examples/nuxt-example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}