Nuxt on Cloudflare

Deploy a Nuxt application to Cloudflare with R2 and Pipeline integration

Nuxt on Cloudflare Example

This example demonstrates deploying a Nuxt application to Cloudflare with R2 Bucket storage and Pipeline for analytics.

Features

• Nuxt: Vue.js meta-framework with SSR
• R2 Bucket: Object storage for data
• Pipeline: Analytics and data pipeline to R2
• Type Safety: Full TypeScript support
• Edge Rendering: Server-side rendering at the edge

Project Setup

Key Features Explained

R2 Bucket

Create an R2 bucket for object storage:

const bucket = await R2Bucket("bucket", {
  name: `${app.name}-${app.stage}-bucket`,
  adopt: true,
  empty: true,
});

Pipeline for Analytics

Pipeline writes analytics data to R2:

const pipeline = await Pipeline("pipeline", {
  source: [{ type: "binding", format: "json" }],
  destination: {
    type: "r2",
    format: "json",
    path: { bucket: bucket.name },
    credentials: {
      accessKeyId: alchemy.secret(process.env.R2_ACCESS_KEY_ID),
      secretAccessKey: alchemy.secret(process.env.R2_SECRET_ACCESS_KEY),
    },
    batch: {
      maxMb: 10,
      maxSeconds: 5,
      maxRows: 100,
    },
  },
});

Bindings in Nuxt

Both R2 and Pipeline are available in server routes:

bindings: {
  R2_BUCKET: bucket,
  PIPELINE: pipeline,
}

Server-Side Access

Access bindings in Nuxt server routes:

export default defineEventHandler(async (event) => {
  const env = event.context.cloudflare.env;
  await env.R2_BUCKET.put('key', 'value');
  await env.PIPELINE.write({ event: 'data' });
});

Pipeline Batching

Pipeline automatically batches writes based on:

• maxMb: Maximum batch size in MB (10)
• maxSeconds: Maximum time before flush (5 seconds)
• maxRows: Maximum number of rows (100)

batch: {
  maxMb: 10,
  maxSeconds: 5,
  maxRows: 100,
}

Analytics Query Example

Query analytics data from R2:

const list = await env.R2_BUCKET.list({ prefix: 'analytics/' });
for (const object of list.objects) {
  const file = await env.R2_BUCKET.get(object.key);
  const data = await file?.json();
  // Process analytics data
}

Use Cases

• File Storage: Upload and serve files from R2
• Analytics: Track events with Pipeline
• Data Lakes: Store structured data in R2
• Logging: Batch logs to R2 via Pipeline

Source Code

View the complete source code: examples/cloudflare-nuxt-pipeline