chore: Prepare for Nuxt 4

2024-07-30 21:46:14 +02:00
parent 9d5504204f
commit 48c331e7ed
11 changed files with 1816 additions and 2998 deletions
--- a/app/app.vue
+++ b/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>
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -0,0 +1,10 @@
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    @apply bg-gray-900;
+}