Initial commit

.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,64 @@
+<template>
+  <div class="flex h-screen justify-center align-middle">
+    <div class="bg-gray-900 py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:mx-0">
+        <h2 class="text-base font-semibold leading-7 text-primary-400">Opinionated Starterkit</h2>
+        <p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Nuxt 3 | SQLite Drizzle</p>
+        <p class="mt-6 text-lg leading-8 text-gray-300">A simple starting Point for your next Project.</p>
+      </div>
+      <dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 text-base leading-7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-16">
+        <div v-for="feature in features" :key="feature.name" class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+            <icon :name="feature.icon" class="absolute left-1 top-1 size-5 text-primary-500" aria-hidden="true" />
+            <a :href="feature.href" target="_blank" referrerpolicy="no-referrer">{{ feature.name }}</a>
+          </dt>
+          {{ ' ' }}
+          <dd class="inline">{{ feature.description }}</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const features = [
+{
+  name: 'Drizzle.',
+  description: 'A headless Typescript ORM. If you know SQL — you know Drizzle.',
+  icon: 'simple-icons:drizzle',
+  href: 'https://orm.drizzle.team/',
+},
+{
+  name: 'VueUse.',
+  description: 'VueUse is a collection of essential Vue Composition Utilities.',
+  icon: 'logos:vueuse',
+  href: 'https://vueuse.org/',
+},
+{
+  name: 'TailwindCSS.',
+  description: 'A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90.',
+  icon: 'logos:tailwindcss-icon',
+  href: 'https://tailwindcss.com/',
+},
+{
+  name: 'Nuxt Icons.',
+  description: 'Lets you use any Icon supported by the Iconify project.',
+  icon: 'simple-icons:iconify',
+  href: 'https://github.com/nuxt-modules/icon',
+},
+{
+  name: 'Nuxt Fonts.',
+  description: 'Automatically import Google Fonts into your Nuxt.js project.',
+  icon: 'tabler:typography',
+  href: 'https://fonts.nuxt.com/',
+},
+{
+  name: 'ESLint.',
+  description: 'Find and fix problems in your JavaScript code.',
+  icon: 'logos:eslint',
+  href: 'https://eslint.org/',
+},
+]
+</script>

assets/css/main.css

@@ -0,0 +1,10 @@
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    @apply bg-gray-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-icon": "^0.6.10",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.3"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.10",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/nuxt": "^10.10.0",
+    "drizzle-kit": "^0.22.7",
+    "eslint-plugin-tailwindcss": "^3.17.3",
+    "nuxt": "^3.12.1"
+  }
+}

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"
+}