chore: Prepare for Nuxt 4
parent
9d5504204f
commit
48c331e7ed
64
app.vue
64
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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"@nuxt/eslint",
|
||||
'@nuxtjs/tailwindcss',
|
||||
'@nuxt/eslint',
|
||||
'@vueuse/nuxt',
|
||||
"nuxt-icon",
|
||||
"@nuxt/fonts"
|
||||
'nuxt-icon',
|
||||
'@nuxt/fonts',
|
||||
],
|
||||
devtools: { enabled: true }
|
||||
})
|
||||
eslint: {
|
||||
config: {
|
||||
stylistic: true,
|
||||
},
|
||||
},
|
||||
|
||||
devtools: { enabled: true },
|
||||
compatibilityDate: '2024-07-30',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4582
pnpm-lock.yaml
4582
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,14 +1,13 @@
|
|||
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' })
|
||||
|
||||
meta: {
|
||||
name: 'db:migrate',
|
||||
description: 'Run database migrations',
|
||||
},
|
||||
async run({ payload, context }) {
|
||||
await migrate(useDrizzle(), { migrationsFolder: 'server/database/migrations' })
|
||||
|
||||
return { result: "Success" };
|
||||
},
|
||||
});
|
||||
return { result: 'Success' }
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import { drizzle } from 'drizzle-orm/better-sqlite3';
|
||||
import Database from 'better-sqlite3';
|
||||
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 })
|
||||
const sqlite = new Database('sqlite.db')
|
||||
return drizzle(sqlite, { schema })
|
||||
}
|
||||
|
||||
export type User = typeof schema.users.$inferSelect
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ import type { Config } from 'tailwindcss'
|
|||
import colors from 'tailwindcss/colors'
|
||||
|
||||
export default <Partial<Config>>{
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ['DM Sans', 'sans-serif']
|
||||
},
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ['DM Sans', 'sans-serif'],
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: colors.green
|
||||
}
|
||||
}
|
||||
}
|
||||
primary: colors.green,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue