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/nuxtjs-example/.gitignore b/examples/nuxtjs-example/.gitignore new file mode 100644 index 0000000000..4a7f73a2ed --- /dev/null +++ b/examples/nuxtjs-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/nuxtjs-example/README.md b/examples/nuxtjs-example/README.md new file mode 100644 index 0000000000..f5db2a2dbf --- /dev/null +++ b/examples/nuxtjs-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/nuxtjs-example/app.vue b/examples/nuxtjs-example/app.vue new file mode 100644 index 0000000000..93db8403f0 --- /dev/null +++ b/examples/nuxtjs-example/app.vue @@ -0,0 +1,5 @@ + diff --git a/examples/nuxtjs-example/components/Connection.client.vue b/examples/nuxtjs-example/components/Connection.client.vue new file mode 100644 index 0000000000..9ed94b6c5c --- /dev/null +++ b/examples/nuxtjs-example/components/Connection.client.vue @@ -0,0 +1,40 @@ + + + diff --git a/examples/nuxtjs-example/components/socket.ts b/examples/nuxtjs-example/components/socket.ts new file mode 100644 index 0000000000..779a08af2a --- /dev/null +++ b/examples/nuxtjs-example/components/socket.ts @@ -0,0 +1,3 @@ +import { io } from "socket.io-client"; + +export const socket = io(); diff --git a/examples/nuxtjs-example/nuxt.config.ts b/examples/nuxtjs-example/nuxt.config.ts new file mode 100644 index 0000000000..6405a8b2a3 --- /dev/null +++ b/examples/nuxtjs-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/nuxtjs-example/package.json b/examples/nuxtjs-example/package.json new file mode 100644 index 0000000000..6db78f26ef --- /dev/null +++ b/examples/nuxtjs-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/nuxtjs-example/public/favicon.ico b/examples/nuxtjs-example/public/favicon.ico new file mode 100644 index 0000000000..18993ad91c Binary files /dev/null and b/examples/nuxtjs-example/public/favicon.ico differ diff --git a/examples/nuxtjs-example/server/plugins/socket.io.ts b/examples/nuxtjs-example/server/plugins/socket.io.ts new file mode 100644 index 0000000000..13c79b48ec --- /dev/null +++ b/examples/nuxtjs-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); + } + } + })); +}); diff --git a/examples/nuxtjs-example/server/tsconfig.json b/examples/nuxtjs-example/server/tsconfig.json new file mode 100644 index 0000000000..b9ed69c19e --- /dev/null +++ b/examples/nuxtjs-example/server/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../.nuxt/tsconfig.server.json" +} diff --git a/examples/nuxtjs-example/tsconfig.json b/examples/nuxtjs-example/tsconfig.json new file mode 100644 index 0000000000..a746f2a70c --- /dev/null +++ b/examples/nuxtjs-example/tsconfig.json @@ -0,0 +1,4 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "extends": "./.nuxt/tsconfig.json" +}