chore: init

Author: atinux

.env.example

@@ -0,0 +1,3 @@
+NUXT_GITHUB_CLIENT_ID=
+NUXT_GITHUB_CLIENT_SECRET=
+NUXT_SESSION_PASSWORD=

.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@nuxt/eslint-config'
+  ],
+  rules: {
+    // Global
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'quote-props': ['error', 'as-needed'],
+    // Vue
+    'vue/multi-word-component-names': 0,
+    'vue/no-v-html': 0
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output
+.env
+.history
+db.sqlite

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -0,0 +1,68 @@
+# Todo list demo using Nuxt & CloudFlare
+
+Live demo: https://nuxt-todos.pages.dev
+
+- Frontend:
+  - [Nuxt](https://nuxt.com/) - The Vue Framework for Web Architects
+  - [TailwindCSS](https://tailwindcss.com/) for styling and layout.
+- Backend:
+  - Sqlite in development and [CloudFlare D1](https://developers.cloudflare.com/d1/) in production
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+pnpm i
+```
+
+Create a GitHub Oauth Application on https://github.com/settings/applications/new
+
+With homepage url and callback url being http://localhost:3000/auth/github
+
+Then, add fill the `NUXT_GITHUB_CLIENT_ID` and `NUXT_GITHUB_CLIENT_SECRET` in the `.env` file:
+
+```bash
+NUXT_GITHUB_CLIENT_ID="my-github-oauth-app-id"
+NUXT_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"
+```
+
+To create sealed session, you also need to add `NUXT_SESSION_SECRET` in the `.env` file with at least 32 characters:
+
+```bash
+NUXT_SESSION_SECRET=your-super-long-secret-for-session-encryption
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Deploying on CloudFlare Pages
+
+### Create your D1 database
+
+- Create a D1 database on your CF account
+- Create a CF pages deployment linked to your GitHub repository
+- Add the environment variables and the ones to setup Node 18 and pnpm
+
+```bash
+NODE_VERSION=18
+NPM_FLAGS=--version
+NUXT_GITHUB_CLIENT_ID=...
+NUXT_GITHUB_CLIENT_SECRET=...
+NUXT_SESSION_SECRET=...
+```
+
+Set the build command to:
+
+```bash
+npx pnpm i --store=node_modules/.pnpm-store && npm run build
+```
+
+And the output directory to `dist/`
+
+That's it :fire:

app.vue

@@ -0,0 +1,48 @@
+<script setup>
+const { loggedIn, user } = useUserSession()
+
+useSeoMeta({
+  title: () => user.value ? `${user.value.login} Todos` : 'Nuxt Todos Edge',
+  description: 'A Nuxt demo hosted on CloudFlare Pages with server-side rendering on the edge and using the D1 database'
+})
+</script>
+
+<template>
+  <div class="container mx-auto min-h-screen flex items-center justify-center">
+    <main>
+      <div class="p-8 border rounded bg-gray-50 shadow-sm">
+        <h1 class="text-3xl pb-4">
+          Todo List
+        </h1>
+        <TodoList v-if="loggedIn" />
+        <div v-else>
+          <p class="text-sm text-gray-500 max-w-sm mb-4">
+            Welcome to Nuxt Todos Edge. A demo hosted on CloudFlare Pages with server-side rendering on the edge and using the <NuxtLink
+              href="https://developers.cloudflare.com/d1/"
+              target="_blank"
+            >
+              D1 database
+            </NuxtLink>.
+          </p>
+          <a
+            href="/api/auth/github"
+            class="inline-block bg-black text-white p-3 py-1 rounded hover:bg-gray-800"
+          >Login with GitHub</a>
+          <p class="text-sm text-gray-500 italic max-w-sm mt-4">
+            No personal informations regarding your GitHub account are stored in database.<br>
+            We store only the todos created linked with your GitHub ID.
+          </p>
+        </div>
+      </div>
+      <footer class="text-center mt-2">
+        <NuxtLink
+          href="https://github.com/atinux/nuxt-todos-edge"
+          target="_blank"
+          class="text-sm text-gray-500 hover:text-gray-700"
+        >
+          Source code on GitHub
+        </NuxtLink>
+      </footer>
+    </main>
+  </div>
+</template>

components/TodoList.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const loading = ref(false)
+const newTodo = ref('')
+
+const { user, clear } = useUserSession()
+const { data: todos } = await useFetch('/api/todos')
+
+async function addTodo () {
+  if (!newTodo.value.trim()) { return }
+
+  loading.value = true
+
+  const todo = await $fetch('/api/todos', {
+    method: 'POST',
+    body: {
+      title: newTodo.value,
+      completed: 0
+    }
+  })
+
+  todos.value!.push(todo)
+  newTodo.value = ''
+  loading.value = false
+}
+
+async function toggleTodo (todo) {
+  todo.completed = Number(!todo.completed)
+  await useFetch(`/api/todos/${todo.id}`, {
+    method: 'PATCH',
+    body: {
+      completed: todo.completed
+    }
+  })
+}
+
+async function deleteTodo (todo) {
+  await useFetch(`/api/todos/${todo.id}`, { method: 'DELETE' })
+  todos.value = todos.value!.filter(t => t.id !== todo.id)
+}
+</script>
+
+<template>
+  <div>
+    <p class="text-sm mb-4">
+      Hello {{ user.login }}!
+      <button
+        class="underline"
+        @click="clear"
+      >
+        Logout
+      </button>
+    </p>
+    <form
+      class="flex gap-2 mb-4"
+      @submit.prevent="addTodo"
+    >
+      <input
+        v-model="newTodo"
+        type="text"
+        :disabled="loading"
+        class="w-full px-2 py-1 border"
+        placeholder="Make a Nuxt demo"
+        autocomplete="off"
+      >
+      <button
+        type="submit"
+        class="bg-black hover:bg-gray-800 text-white px-4 py-1"
+      >
+        Add
+      </button>
+    </form>
+    <ul>
+      <li
+        v-for="todo of todos"
+        :key="todo.id"
+        class="flex items-center gap-2 py-2 border-b border-gray-200 divide-y divide-gray-200"
+      >
+        <span
+          class="flex-1"
+          :class="[todo.completed ? 'line-through u-text-gray-500' : 'u-text-gray-700']"
+        >{{ todo.title }}</span>
+        <input
+          :checked="Boolean(todo.completed)"
+          type="checkbox"
+          :name="String(todo.id)"
+          @change="toggleTodo(todo)"
+        >
+        <button
+          type="button"
+          class="bg-red-200 border-none text-sm rounded px-2"
+          @click="deleteTodo(todo)"
+        >
+          x
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="postcss">
+ul > li:last-child {
+  @apply border-b-0;
+}
+</style>

composables/session.ts

@@ -0,0 +1,23 @@
+import { UserSession } from '~/server/utils/session'
+
+const useUserSessionState = () => useState<UserSession>('nuxt-session', () => ({}))
+
+export const useUserSession = () => {
+  const sessionState = useUserSessionState()
+  return {
+    loggedIn: computed(() => Boolean(sessionState.value.user)),
+    user: computed(() => sessionState.value.user || null),
+    data: sessionState,
+    fetch,
+    clear
+  }
+}
+
+async function fetch() {
+  useUserSessionState().value = await useRequestFetch()('/api/session').catch(_ => ({}))
+}
+
+async function clear() {
+  await $fetch('/api/session', { method: 'DELETE' })
+  useUserSessionState().value = {}
+}

nuxt.config.ts

@@ -0,0 +1,18 @@
+export default defineNuxtConfig({
+  modules: [
+    '@nuxtjs/tailwindcss'
+  ],
+  devtools: {
+    enabled: true
+  },
+  runtimeConfig: {
+    github: {
+      clientId: '',
+      clientSecret: ''
+    },
+    session: {
+      name: 'nuxt-session',
+      password: ''
+    }
+  }
+})

package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "preview": "nuxt preview",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^0.4.5",
+    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxtjs/tailwindcss": "^6.6.7",
+    "@vercel/postgres": "^0.1.3",
+    "better-sqlite3": "^8.3.0",
+    "eslint": "^8.39.0",
+    "h3-zod": "^0.5.1",
+    "nuxt": "^3.4.3",
+    "typescript": "^5.0.4",
+    "zod": "^3.21.4"
+  }
+}