Nuxt Todo List on the Serverless with Edgio

A demonstration using Nuxt with server-side rendering on the serverless, authentication and database using SQLite (Turso).

https://github.com/rishi-raj-jain/nuxt-turso-edgio-example

Live demo:

• Edgio + Turso: https://rishi-raj-jain-turso-default.layer0-limelight.link

Features

• Server-Side Rendering
• Authentication backed-in
• Leverage SQLite as database with migrations

Stack

• Frontend:
  • Nuxt - The Vue Framework for Web Architects
  • TailwindCSS for styling and layout
• Backend:
  • Sqlite in development and Turso in production using drizzle-orm

Setup

Make sure to install the dependencies using npm:

npm i

Create a GitHub Oauth Application with:

• Homepage url: http://localhost:3000
• Callback url: http://localhost:3000/api/auth/github

Add the variables in the .env file:

NUXT_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"

To create sealed sessions, you also need to add NUXT_SESSION_PASSWORD in the .env with at least 32 characters:

NUXT_SESSION_PASSWORD=your-super-long-secret-for-session-encryption

Development

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

edg dev

Deploy on Edgio

edg deploy

Environment variables

NUXT_GITHUB_CLIENT_ID="..."
NUXT_GITHUB_CLIENT_SECRET="..."
NUXT_SESSION_PASSWORD="..."
TURSO_DB_URL="..."
TURSO_DB_TOKEN="..."

Build command

Set the build command to:

edg build

And the output directory to ./.edgio

Turso Database

You can also use Turso database by creating a database and adding the following env variables:

TURSO_DB_URL=...
TURSO_DB_TOKEN=...

License

MIT License