A demo application showcasing @netlify/nuxt β bringing full local Netlify platform emulation to nuxt dev.
This interactive Q&A platform demonstrates real-time features powered by Netlify's edge infrastructure, including Edge Functions, Blobs storage, and Server-Sent Events (SSE).
- β¨ Real-time Q&A Sessions: Create interactive question and answer sessions for events
- π Live Voting: Audience can vote on questions in real-time
- π Geographic Insights: Shows participant locations using Netlify Edge Functions
- πΎ Persistent Storage: Questions and votes stored using Netlify Blobs
- π Live Updates: Real-time updates via Server-Sent Events
- π₯ User Presence: See who's currently online in each session
This demo showcases various Netlify platform capabilities:
- Edge Functions: Geographic middleware and SSE handling
- Blobs: Persistent data storage for events, questions, and votes
- Server-Sent Events: Real-time communication between server and clients
- Nuxt Integration: Seamless development experience with full platform emulation
- Node.js 18+
npm installStart the development server with full Netlify platform emulation:
npm run devOpen http://localhost:3000 to view the application.
- Create an Event: Enter a title and description for your Q&A session
- Share the Link: Copy the generated link to share with your audience
- Collect Questions: Participants can submit questions in real-time
- Vote & Prioritize: Questions are ranked by community votes
- Monitor Activity: See live updates and participant geography
βββ netlify/
β βββ edge-functions/
β βββ geo-middleware.ts # Geographic data collection
β βββ sse.ts # Server-Sent Events handling
βββ server/
β βββ api/ # Nuxt server API routes
βββ components/
β βββ LiveUpdatesIndicator.vue # Real-time status indicator
β βββ OnlineUsers.vue # User presence component
βββ composables/
β βββ useGeo.ts # Geographic data composable
β βββ useSSE.ts # Server-Sent Events composable
βββ stores/
β βββ questions.ts # Pinia state management
βββ utils/
βββ shared-storage.ts # Netlify Blobs utilities
Deploy to Netlify:
# Build for production
npm run build
# Deploy via Netlify CLI
netlify deploy --prod- Nuxt 4: Vue.js framework with server-side rendering
- @netlify/nuxt: Nuxt module for Netlify
- Netlify Blobs: Persistent data storage
- Netlify Edge Functions: Serverless functions at the edge
- Pinia: Vue state management
- Tailwind CSS: Utility-first CSS framework