first commit

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+# Trailing whitespace
+[*.md]
+trim_trailing_whitespace = false

.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

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/app.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+        <NuxtRouteAnnouncer />
+        <UiButton>Test</UiButton>
+    </div>
+</template>

app/components/ui/alert/Alert.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/app/lib/utils'
+import { type AlertVariants, alertVariants } from '.'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+    variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+    <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+        <slot />
+    </div>
+</template>

app/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+        <slot />
+    </div>
+</template>

app/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+        <slot />
+    </h5>
+</template>

app/components/ui/alert/index.ts

@@ -0,0 +1,23 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+    'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+    {
+        variants: {
+            variant: {
+                default: 'bg-background text-foreground',
+                destructive:
+                    'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

app/components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: 'button',
+})
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn(buttonVariants({ variant, size }), props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>

app/components/ui/button/index.ts

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-primary text-primary-foreground hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+                outline:
+                    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+                secondary:
+                    'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-10 px-4 py-2',
+                xs: 'h-7 rounded px-2',
+                sm: 'h-9 rounded-md px-3',
+                lg: 'h-11 rounded-md px-8',
+                icon: 'h-10 w-10',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

app/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

components.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://shadcn-vue.com/schema.json",
+    "style": "default",
+    "typescript": true,
+    "tsConfigPath": ".nuxt/tsconfig.json",
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "assets/styles/index.css",
+        "baseColor": "neutral",
+        "cssVariables": true
+    },
+    "framework": "nuxt",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui"
+    }
+}

eslint.config.mjs

@@ -0,0 +1,27 @@
+// eslint.config.js
+import antfu from '@antfu/eslint-config'
+import perfectionist from 'eslint-plugin-perfectionist'
+import nuxt from './.nuxt/eslint.config.mjs'
+
+export default
+nuxt(
+    antfu({
+        type: 'app',
+        formatters: true,
+        unocss: true,
+        typescript: true,
+        vue: true,
+        jsonc: true,
+        yaml: true,
+        stylistic: {
+            indent: 4,
+            quotes: 'single',
+        },
+    }),
+).append(
+    {
+        plugins: [
+            perfectionist.configs['recommended-natural'],
+        ],
+    },
+)

nuxt.config.ts

@@ -0,0 +1,44 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    compatibilityDate: '2024-04-03',
+    devtools: { enabled: true },
+    future: {
+        compatibilityVersion: 4,
+    },
+    modules: [
+        '@unocss/nuxt',
+        '@nuxt/content',
+        '@nuxthq/studio',
+        '@nuxt/devtools',
+        '@nuxt/test-utils',
+        '@nuxt/eslint',
+        '@pinia/nuxt',
+        '@pinia-plugin-persistedstate/nuxt',
+        '@dargmuesli/nuxt-cookie-control',
+        '@nuxt/image',
+        'nuxt-svgo',
+        '@vueuse/nuxt',
+        '@vee-validate/nuxt',
+        'dayjs-nuxt',
+        '@nuxt/icon',
+        '@formkit/auto-animate',
+        '@nuxt/fonts',
+        '@nuxt/scripts',
+        '@nuxtjs/color-mode',
+        '@nuxtjs/seo',
+    ],
+    colorMode: {
+        preference: 'system', // default value of $colorMode.preference
+        fallback: 'light', // fallback value if not system preference found
+        classSuffix: '',
+    },
+    features: {
+        // For UnoCSS
+        inlineStyles: false,
+    },
+    eslint: {
+        config: {
+            standalone: false,
+        },
+    },
+})