Init

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex h-screen justify-center align-middle">
+    <div class="m-32 w-full rounded bg-white p-4">
+      <div>
+        <h1 class="text-5xl font-bold">Nuxt 3 - Starterkit</h1>
+      </div>
+      <div class="container mt-8">
+        <ul class="text-3xl">
+          <li class="space-x-4">
+            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://orm.drizzle.team/" target="_blank">Drizzle:</a><span>Database ORM</span>
+          </li>
+          <li class="space-x-4">
+            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://vueuse.org/guide/" target="_blank">VueUse:</a><span>Utility functions</span>
+          </li>
+          <li class="space-x-4">
+            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://github.com/nuxt-modules/icon" target="_blank">Nuxt Icons:</a><span>Iconify integration</span>
+          </li>
+          <li class="space-x-4">
+            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://fonts.nuxt.com/" target="_blank">Nuxt Fonts:</a><span>Plug-and-play fonts optimization for Nuxt apps</span>
+          </li>
+          <li class="space-x-4">
+            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://tailwindcss.com/docs/installation" target="_blank">TailwindCSS:</a><span>CSS Framework</span>
+          </li>
+          <li class="space-x-4">
+            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://eslint.org/docs/latest/" target="_blank">ESLint:</a><span>Linting utility</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    </div>
+</template>

assets/css/main.css

@@ -0,0 +1,10 @@
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    @apply bg-slate-900;
+}

drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+  dialect: 'sqlite',
+  schema: './server/database/schema.ts',
+  out: './server/database/migrations',
+  dbCredentials: {
+    url: './sqlite.db', // 👈 this could also be a path to the local sqlite file
+  }
+})

eslint.config.mjs

@@ -0,0 +1,7 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+import tailwind from "eslint-plugin-tailwindcss";
+
+export default withNuxt(
+  ...tailwind.configs['flat/recommended']
+)

nuxt.config.ts

@@ -0,0 +1,18 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  css: ['~/assets/css/main.css'],
+  nitro: {
+    experimental: {
+      tasks: true
+    }
+  },
+
+  modules: [
+    "@nuxtjs/tailwindcss",
+    "@nuxt/eslint",
+    '@vueuse/nuxt',
+    "nuxt-icon",
+    "@nuxt/fonts"
+  ],
+  devtools: { enabled: true }
+})

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "db:generate": "drizzle-kit generate"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "^0.3.13",
+    "@nuxt/fonts": "^0.7.0",
+    "@nuxtjs/tailwindcss": "^6.12.0",
+    "better-sqlite3": "^11.0.0",
+    "drizzle-orm": "^0.31.2",
+    "nuxt": "^3.11.2",
+    "nuxt-icon": "^0.6.10",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.10",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/nuxt": "^10.10.0",
+    "drizzle-kit": "^0.22.5",
+    "eslint-plugin-tailwindcss": "^3.17.3"
+  }
+}

server/database/migrations/0000_glossy_chamber.sql

@@ -0,0 +1,10 @@
+CREATE TABLE `users` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`email` text NOT NULL,
+	`password` text NOT NULL,
+	`avatar` text NOT NULL,
+	`created_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `users_email_unique` ON `users` (`email`);

server/database/migrations/meta/0000_snapshot.json

@@ -0,0 +1,76 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "df46f5ae-5350-4f3e-bf7e-aff5aca8bc09",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "avatar": {
+          "name": "avatar",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/database/migrations/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1717829526341,
+      "tag": "0000_glossy_chamber",
+      "breakpoints": true
+    }
+  ]
+}

server/database/schema.ts

@@ -0,0 +1,10 @@
+import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'
+
+export const users = sqliteTable('users', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  password: text('password').notNull(),
+  avatar: text('avatar').notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
+})

server/tasks/db/migrate.ts

@@ -0,0 +1,14 @@
+import { migrate } from 'drizzle-orm/better-sqlite3/migrator'
+
+export default defineTask({
+    meta: {
+      name: "db:migrate",
+      description: "Run database migrations",
+    },
+    async run({ payload, context }) {
+      await migrate(useDrizzle(), { migrationsFolder: 'server/database/migrations' })
+      
+
+      return { result: "Success" };
+    },
+  });

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

server/utils/drizzle.ts

@@ -0,0 +1,14 @@
+import { drizzle } from 'drizzle-orm/better-sqlite3';
+import Database from 'better-sqlite3';
+
+import * as schema from '../database/schema'
+export { sql, eq, and, or } from 'drizzle-orm'
+
+export const tables = schema
+
+export function useDrizzle() {
+    const sqlite = new Database('sqlite.db');
+    return drizzle(sqlite, { schema })
+}
+
+export type User = typeof schema.users.$inferSelect

tailwind.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+
+export default <Partial<Config>>{
+    theme: {
+      fontFamily: {
+        sans: ['DM Sans', 'sans-serif']
+      },
+    extend: {
+      colors: {
+        primary: colors.green
+      }
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}