Multiplayer Globe App with Nuxt

Display website visitor locations in real-time using Nuxt and NuxtHub.

https://multiplayer-globe.nuxthub.workers.dev

Credits

Inspired by Cloudflare's multiplayer-globe-template.

Features

• Server-Side rendering on Cloudflare Workers
• ESLint setup
• Ready to add a database, blob and KV storage
• One click deploy on 275+ locations for free

How it works

When the first request is made, the server store the user's location (latitude and longitude) using the useState composable in the app/plugins/location.server.ts file.

A /ws/visitors websocket endpoint is created in the server/routes/ws/visitors.ts file using the defineWebSocketHandler function.

When the index.vue page is mounted on client-side, it connects to the /ws/visitors websocket endpoint with its location as query parameters to the server.

The websocket endpoints send back the user locations to the client-side.

Setup

Make sure to install the dependencies with pnpm:

pnpm install

Development Server

Start the development server on http://localhost:3000:

pnpm dev

[!TIP] A random location is generated in development as we don't have access to Cloudflare's geolocation data on the incoming request.

Production

Build the application for production:

pnpm build

Deploy

Deploy with one command on your Cloudflare account with:

npx nuxthub deploy

Learn more on https://hub.nuxt.com