chore: Prepare for Nuxt 4

app.vue

@@ -1,64 +0,0 @@
-<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>

app/app.vue

@@ -0,0 +1,84 @@
+<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>

drizzle.config.ts

@@ -6,5 +6,5 @@ export default defineConfig({
   out: './server/database/migrations',
   dbCredentials: {
     url: './sqlite.db', // 👈 this could also be a path to the local sqlite file
-  }
+  },
-})
+})

eslint.config.mjs

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

nuxt.config.ts

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

package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
@@ -26,6 +28,6 @@
     "@vueuse/nuxt": "^10.10.0",
     "drizzle-kit": "^0.22.7",
     "eslint-plugin-tailwindcss": "^3.17.3",
-    "nuxt": "^3.12.1"
+    "nuxt": "^3.12.4"
   }
 }

server/tasks/db/migrate.ts

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

server/utils/drizzle.ts

@@ -1,14 +1,15 @@
-import { drizzle } from 'drizzle-orm/better-sqlite3';
+import { drizzle } from 'drizzle-orm/better-sqlite3'
-import Database from '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');
+  const sqlite = new Database('sqlite.db')
-    return drizzle(sqlite, { schema })
+  return drizzle(sqlite, { schema })
 }
 
 export type User = typeof schema.users.$inferSelect

tailwind.config.ts

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