Skip to content

Commit e0b72c6

Browse files
oneminchoneminch
committed
feat: add Nuxt UI and Content modules
1 parent c83752d commit e0b72c6

File tree

14 files changed

+2720
-101
lines changed

14 files changed

+2720
-101
lines changed

‎.playground/app/app.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
<template>
2-
<base-layer />
2+
<UApp>
3+
<NuxtLayout>
4+
<NuxtPage />
5+
</NuxtLayout>
6+
</UApp>
37
</template>

‎.playground/app/assets/css/main.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "@minch/nuxt-basis/tailwind";
2+
@source "../content/**/*";
23

34
@theme {
45
--color-nuxt-green: #00dc82;
@@ -8,3 +9,9 @@
89
@utility card {
910
@apply min-w-36 bg-white text-center text-zinc-600 font-bold border border-zinc-200 py-4 px-8 rounded-lg flex flex-col items-center justify-center gap-y-2;
1011
}
12+
13+
@layer base {
14+
body {
15+
@apply bg-zinc-50/25;
16+
}
17+
}

‎.playground/app/components/BaseLayer.vue‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<template>
22
<div
3-
class="absolute inset-0 bg-zinc-50 flex flex-col items-center justify-center gap-y-10"
3+
class="absolute inset-0 flex flex-col items-center justify-center gap-y-10"
44
>
55
<div class="flex flex-col items-center justify-center gap-y-4">
66
<Icon name="simple-icons:nuxt" class="text-9xl text-nuxt-green" />
77

88
<h1 class="text-5xl font-bold text-zinc-700">Nuxt Basis</h1>
99

10-
<p
11-
class="font-mono py-1 px-5 bg-zinc-800 font-semibold text-nuxt-green rounded-full"
12-
>
13-
@minch/nuxt-basis
14-
</p>
10+
<div class="flex items-center gap-x-4">
11+
<UButton to="/docs" variant="subtle" class="rounded-full"
12+
>Docs 📄</UButton
13+
>
14+
15+
<USeparator orientation="vertical" class="h-5" />
16+
17+
<slot />
18+
</div>
1519
</div>
1620

1721
<div class="flex items-center justify-between gap-x-4">
@@ -26,13 +30,25 @@
2630
/>
2731
<p>Tailwind CSS</p>
2832
</div>
29-
<div class="card">
30-
<Icon
31-
name="clarity:blocks-group-solid"
32-
class="text-2xl text-papaya-500"
33-
/>
34-
<p>+ More</p>
35-
</div>
33+
<UPopover mode="hover">
34+
<div class="card">
35+
<Icon
36+
name="clarity:blocks-group-solid"
37+
class="text-2xl text-papaya-500"
38+
/>
39+
<p>+ More</p>
40+
</div>
41+
42+
<template #content>
43+
<ul class="py-3 px-5 text-muted">
44+
<li><pre>ESLint</pre></li>
45+
<li><pre>Nuxt Content</pre></li>
46+
<li><pre>Nuxt Image</pre></li>
47+
<li><pre>Nuxt Test Utils</pre></li>
48+
<li><pre>Nuxt UI</pre></li>
49+
</ul>
50+
</template>
51+
</UPopover>
3652
</div>
3753
</div>
3854
</template>

‎.playground/app/pages/[...slug].vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
const route = useRoute();
3+
4+
const { data } = await useAsyncData(route.path, () =>
5+
queryCollection("content").path(route.path).first(),
6+
);
7+
8+
useSeoMeta({
9+
title: data.value?.title,
10+
description: data.value?.description,
11+
});
12+
</script>
13+
14+
<template>
15+
<div class="max-w-4xl mx-auto p-6">
16+
<ContentRenderer v-if="data" :value="data" />
17+
<div v-else>Page not found</div>
18+
</div>
19+
</template>

‎.playground/content.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineCollection, defineContentConfig } from "@nuxt/content";
2+
3+
export default defineContentConfig({
4+
collections: {
5+
content: defineCollection({
6+
type: "page",
7+
source: {
8+
include: "**/*.md",
9+
},
10+
}),
11+
},
12+
});

‎.playground/content/docs.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
[Home 🏠](/)
2+
3+
# Documentation
4+
5+
`@minch/nuxt-basis` is a base layer for Nuxt Projects that provides a pre-configured setup with Nuxt 4, Tailwind CSS 4, and additional modules.
6+
7+
## Features
8+
9+
- Pre-configured modules:
10+
- [@nuxt/eslint](https://github.com/nuxt/eslint) - ESLint integration
11+
- [@nuxt/content](https://content.nuxt.com/) - Content management
12+
- [@nuxt/image](https://image.nuxt.com/) - Image optimization
13+
- [@nuxt/test-utils](https://nuxt.com/docs/getting-started/testing) - Testing utilities
14+
- [@nuxt/ui](https://ui.nuxt.com/) - UI components
15+
- Built-in TailwindCSS 4 configuration
16+
- TypeScript support
17+
- DevTools enabled by default
18+
19+
## Installation
20+
21+
```bash
22+
pnpm add -D @minch/nuxt-basis
23+
```
24+
25+
## Usage
26+
27+
1. Add the layer to your `nuxt.config.ts`:
28+
29+
```ts
30+
export default defineNuxtConfig({
31+
extends: ["@minch/nuxt-basis"],
32+
});
33+
```
34+
35+
2. (Optional) Configure modules in `nuxt.config.ts`:
36+
37+
```ts
38+
export default defineNuxtConfig({
39+
extends: ["@minch/nuxt-basis"],
40+
baseModules: {
41+
eslint: true, // Enable/disable ESLint module
42+
content: true, // Enable/disable Content module
43+
image: true, // Enable/disable Image module
44+
testUtils: true, // Enable/disable Test Utils module
45+
ui: true, // Enable/disable UI module
46+
},
47+
});
48+
```
49+
50+
All modules are enabled by default. Set any option to `false` to disable that module.
51+
52+
## TailwindCSS Integration
53+
54+
This layer includes TailwindCSS by default. You can import the base styles in your project:
55+
56+
```ts
57+
// In your CSS file
58+
@import '@minch/nuxt-basis/tailwind';
59+
```
60+
61+
## Development
62+
63+
The `.playground` directory contains an example implementation of this layer.
64+
65+
```bash
66+
# Install dependencies
67+
pnpm install
68+
69+
# Develop with the playground
70+
pnpm dev
71+
72+
# Build the playground
73+
pnpm build
74+
75+
# Generate static playground
76+
pnpm generate
77+
78+
# Preview the build
79+
pnpm preview
80+
```

‎.playground/content/index.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
::base-layer
2+
3+
```bash
4+
pnpm add @minch/nuxt-basis
5+
```
6+
7+
::

‎.playground/nuxt.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
export default defineNuxtConfig({
22
css: ["~/assets/css/main.css"],
33
extends: [".."],
4+
ui: {
5+
content: true,
6+
},
47
});

‎README.md‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,78 @@
1-
# @minch/nuxt-basis
1+
# Docs for Nuxt Basis
22

3-
A Base Layer for Nuxt Projects (Nuxt 4, Tailwind CSS 4, & Additional Modules).
3+
@minch/nuxt-basis is a base layer for Nuxt Projects that provides a pre-configured setup with Nuxt 4, Tailwind CSS 4, and additional modules.
44

5-
## Working on the layer
5+
## Features
66

7-
The `.playground` directory should help you on trying your layer during development.
7+
- Pre-configured modules:
8+
- [@nuxt/eslint](https://github.com/nuxt/eslint) - ESLint integration
9+
- [@nuxt/content](https://content.nuxt.com/) - Content management
10+
- [@nuxt/image](https://image.nuxt.com/) - Image optimization
11+
- [@nuxt/test-utils](https://nuxt.com/docs/getting-started/testing) - Testing utilities
12+
- [@nuxt/ui](https://ui.nuxt.com/) - UI components
13+
- Built-in TailwindCSS 4 configuration
14+
- TypeScript support
15+
- DevTools enabled by default
816

9-
Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
17+
## Installation
18+
19+
```bash
20+
pnpm add -D @minch/nuxt-basis
21+
```
1022

1123
## Usage
1224

13-
```bash
14-
npm install --save-dev @minch/nuxt-basis
25+
1. Add the layer to your `nuxt.config.ts`:
26+
27+
```ts
28+
export default defineNuxtConfig({
29+
extends: ["@minch/nuxt-basis"],
30+
});
1531
```
1632

17-
Then add the dependency to their `extends` in `nuxt.config`:
33+
2. (Optional) Configure modules in `nuxt.config.ts`:
1834

1935
```ts
20-
defineNuxtConfig({
36+
export default defineNuxtConfig({
2137
extends: ["@minch/nuxt-basis"],
38+
baseModules: {
39+
eslint: true, // Enable/disable ESLint module
40+
content: true, // Enable/disable Content module
41+
image: true, // Enable/disable Image module
42+
testUtils: true, // Enable/disable Test Utils module
43+
ui: true, // Enable/disable UI module
44+
},
2245
});
2346
```
47+
48+
All modules are enabled by default. Set any option to `false` to disable that module.
49+
50+
## TailwindCSS Integration
51+
52+
This layer includes TailwindCSS by default. You can import the base styles in your project:
53+
54+
```ts
55+
// In your CSS file
56+
@import '@minch/nuxt-basis/tailwind';
57+
```
58+
59+
## Development
60+
61+
The `.playground` directory contains an example implementation of this layer.
62+
63+
```bash
64+
# Install dependencies
65+
pnpm install
66+
67+
# Develop with the playground
68+
pnpm dev
69+
70+
# Build the playground
71+
pnpm build
72+
73+
# Generate static playground
74+
pnpm generate
75+
76+
# Preview the build
77+
pnpm preview
78+
```

‎app/assets/css/tailwind.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import "tailwindcss";
2-
@custom-variant dark (&:where(.dark, .dark *));
2+
@import "@nuxt/ui";
33

44
@theme {
55
/* Papaya Color Palette */

0 commit comments

Comments
 (0)