nuxt-hub · atinux · Apr 14, 2025 · Apr 11, 2025 · Apr 14, 2025 · Apr 14, 2025
diff --git a/docs/content/changelog/workers.md b/docs/content/changelog/workers.md
@@ -0,0 +1,78 @@
+---
+title: NuxtHub on Workers
+description: "Deploy your Nuxt apps to Cloudflare Workers and build real-time experiences with zero configuration."
+date: 2025-04-15
+image: '/images/changelog/workers-support.png'
+authors:
+  - name: Sebastien Chopin
+    avatar:
+      src: https://avatars.githubusercontent.com/u/904724?v=4
+    to: https://bsky.app/profile/atinux.com
+    username: atinux
+  - name: Rihan Arfan
+    avatar:
+      src: https://avatars.githubusercontent.com/u/20425781?v=4
+    to: https://bsky.app/profile/rihan.dev
+    username: rihan.dev
+  - name: Ahad Birang
+    avatar:
+      src: https://avatars.githubusercontent.com/u/2047945?v=4
+    to: https://bsky.app/profile/farnabaz.dev
+    username: farnabaz.dev
+---
+
+::tip
+This feature is available on both [free and pro plans](/pricing) and in [`@nuxthub/core >= v0.8.24`](https://github.com/nuxt-hub/core/releases/tag/v0.8.24).
+::
+
+After much development (and [many](https://x.com/Atinux/status/1907552625559744865/photo/1) [teasers](https://x.com/Atinux/status/1884315020982657452/video/1)), we're thrilled to announce that NuxtHub now supports deploying to Cloudflare Workers!
+
+## Why Workers
+
+For a while, Cloudflare have been releasing exciting new features such as [observability & persistent logs](https://developers.cloudflare.com/workers/observability/logs/workers-logs/), [workflows](https://developers.cloudflare.com/workflows/), [cron triggers](https://developers.cloudflare.com/workers/configuration/cron-triggers/), and [much more](https://developers.cloudflare.com/workers/static-assets/migrate-from-pages/#compatibility-matrix). However, these features are only available on Cloudflare Workers, and were not brought to Cloudflare Pages.
+
+Now with the introduction of [static assets](https://developers.cloudflare.com/workers/static-assets/), suddenly it is now viable to deploy Nuxt applications to Cloudflare Workers, and we can benefit from the new features and services available on Cloudflare Workers.
+
+## Real-time
+
+Projects deployed to NuxtHub on Workers also fully support [Nitro WebSocket](https://nitro.build/guide/websocket), allowing you to create real-time experiences on NuxtHub. Simply set `nitro.experimental.websocket` to `true` in your `nuxt.config.ts`, create your websocket server route with crossws, and deploy!
+
+Under the hood this is powered by Cloudflare Durable Objects. Nitro and NuxtHub magically takes care of everything related to the Durable Object, from building to deploying.
+
+Check out our [multiplayer-globe](https://github.com/nuxt-hub/multiplayer-globe) template for an example of using websockets ([live demo](https://multiplayer-globe.nuxthub.workers.dev/)).
+
+::note{to=https://nitro.build/guide/websocket icon="i-lucide-book"}
+Learn more about Nitro WebSocket on the Nitro documentation
+::
+
+## Deploying to Workers
+
+Get started by creating a new project and selecting the Cloudflare Workers type on the [NuxtHub Admin](https://admin.hub.nuxt.com) or with the latest version of the `nuxthub` CLI ([v0.9.0](https://github.com/nuxt-hub/cli/releases)). All our templates are fully compatible with NuxtHub on Workers.
+
+We're working on a migration path to help simplify the switch from Cloudflare Pages to Workers. Until then, you can deploy your existing Nuxt apps to Cloudflare Workers by setting `hub.workers` to `true`, and linking them to a separate new project with the Workers type, then manually moving any data stored in your database, KV or blob.
+
+::note
+While NuxtHub on Workers is in beta, preview environments aren't unavailable. Stay tuned for updates.
+::
+
+::important
+**If you already have a NuxtHub account**, make sure to add the `Workers Scripts` permission on your Cloudflare API token.
+
+- Open [Cloudflare User API Tokens](https://dash.cloudflare.com/profile/api-tokens)
+- Find your NuxtHub token(s)
+- Add the `Workers Scripts > Edit` permission
+- Save the changes
+
+Another solution is to link again your Cloudflare account from your NuxtHub team settings by clicking on `Connect a different Cloudflare account` > `Create a token`.
+::
+
+## What's next
+
+Throughout the next few weeks, we'll be enhancing NuxtHub on Workers with new features and integration with more Cloudflare Workers-specific services, including:
+
+- **Observability**: Automatically ingest, filter, and analyse logs
+- **Queues**: Process background tasks effectively at scale
+- **Cron Tasks**: Run Nitro tasks automatically on a schedule
+- **Environments**: Bringing the preview environment to NuxtHub on Workers
+
+Let us know your feedback by joining our [Discord](https://discord.gg/vW89dsVqBF), following us on [X](https://x.com/nuxt_hub), or emailing us at hub@nuxt.com.
diff --git a/docs/content/docs/2.features/realtime.md b/docs/content/docs/2.features/realtime.md
@@ -0,0 +1,87 @@
+---
+title: Realtime & WebSockets
+navigation.title: Realtime
+description: Build realtime experiences with NuxtHub using Cloudflare Workers & Durable Objects.
+---
+
+## Getting Started
+
+Enable [Niro's experimental WebSocket](https://nitro.build/guide/websocket) support by adding the following to your `nuxt.config.ts` file:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  nitro: {
+    experimental: {
+      websocket: true
+    }
+  },
+  hub: {
+    workers: true
+  }
+})
+```
+
+::note
+We need to enable the `workers` option to use the WebSocket support as Durable Objects are only supported on Cloudflare Workers.
+::
+
+## Example
+
+Let's create a simple application that display how many users are connected to the website.
+
+First, let's create a websocket handler on `/ws/visitors` route:
+
+```ts [server/routes/ws/visitors.ts]
+export default defineWebSocketHandler({
+  open(peer) {
+    // We subscribe to the 'visitors' channel
+    peer.subscribe('visitors')
+    // We publish the number of connected users to the 'visitors' channel
+    peer.publish('visitors', peer.peers.size)
+    // We send the number of connected users to the client
+    peer.send(peer.peers.size)
+  },
+  close(peer) {
+    peer.unsubscribe('visitors')
+    // Wait 500ms before sending the updated locations to the server
+    setTimeout(() => {
+      peer.publish('visitors', peer.peers.size)
+    }, 500)
+  },
+})
+```
+
+Install VueUse if you haven't already:
+
+```bash [Terminal]
+npx nuxi module add vueuse
+```
+
+Let's use the [`useWebSocket`](https://vueuse.org/core/useWebSocket/) composable from VueUse to subscribe to the `visitors` channel and display the number of connected users.
+
+```vue [pages/visitors.vue]
+<script setup lang="ts">
+const visitors = ref(0)
+const { open } = useWebSocket('/ws/visitors', {
+  immediate: false,
+  async onMessage(ws, event) {
+    // We parse the number of connected users from the message
+    // The message might be a string or a Blob
+    visitors.value = parseInt(typeof event.data === 'string' ? event.data : await event.data.text())
+  },
+})
+
+// We open the connection when the component is mounted
+onMounted(() => {
+  open()
+})
+</script>
+
+<template>
+  <div>
+    <h1>Visitors: {{ visitors }}</h1>
+  </div>
+</template>
+```
+
+See a full open source example on [GitHub](https://github.com/nuxt-hub/multiplayer-globe), including geolocation tracking.
diff --git a/docs/content/index.yml b/docs/content/index.yml
@@ -10,8 +10,8 @@ hero:
     light: '/images/landing/hero-light.svg'
     dark: '/images/landing/hero-dark.svg'
   headline:
-    label: "NuxtHub Github App & Action"
-    to: /changelog/github-app-and-action
+    label: "Deploy to Cloudflare Workers"
+    to: /changelog/workers
     icon: i-lucide-arrow-right
 features:
   - title: Cloud Hosting
@@ -38,13 +38,13 @@ features:
     description: Run generative AI tasks on a global network and build full-stack AI applications.
     icon: i-lucide-wand
     to: /docs/features/ai
-  - title: Analytics Engine
-    description: Write data points & query with an SQL API with a unlimited-cardinality analytics service at scale.
-    icon: i-lucide-bar-chart-4
-    soon: true
   - title: Real-time & sockets
     description: Create collaborative applications, real-time chat, multiplayer games and more.
     icon: i-lucide-mouse-pointer-click
+    to: /docs/features/realtime
+  - title: Analytics Engine
+    description: Write data points & query with an SQL API with a unlimited-cardinality analytics service at scale.
+    icon: i-lucide-bar-chart-4
     soon: true
   - title: Cron Triggers & Queues
     description: Run periodic jobs with cron triggers & make sure to guarantee delivery with queues.

diff --git a/docs/public/images/changelog/workers-support.png b/docs/public/images/changelog/workers-support.png