Skip to content

Commit 46a05b4

Browse files
cpreston321cpreston321
authored
feat(anu-nuxt): better support and config (#108)
1 parent 65d555d commit 46a05b4

File tree

12 files changed

+8007
-5838
lines changed

12 files changed

+8007
-5838
lines changed

‎docs/guide/getting-started/installation.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -182,17 +182,17 @@ You can also follow À la carte fashion if you don't want to register all the co
182182
183183
## Nuxt
184184
185-
1. instead of installing `anu-vue` package, install `@anu-vue/nuxt`.
185+
1. Instead of installing `anu-vue` package, install `@anu-vue/nuxt`.
186186
187187
```bash
188188
# pnpm
189-
pnpm add @anu-vue/nuxt @anu-vue/preset-theme-default && pnpm add -D @unocss/nuxt
189+
pnpm add @anu-vue/nuxt && pnpm add -D @unocss/nuxt
190190
191191
# yarn
192-
yarn add @anu-vue/nuxt @anu-vue/preset-theme-default && yarn add -D @unocss/nuxt
192+
yarn add @anu-vue/nuxt && yarn add -D @unocss/nuxt
193193
194194
# npm
195-
npm install @anu-vue/nuxt @anu-vue/preset-theme-default && npm install -D @unocss/nuxt
195+
npm install @anu-vue/nuxt && npm install -D @unocss/nuxt
196196
```
197197
198198
2. Add Anu & UnoCSS in nuxt modules
@@ -202,11 +202,18 @@ You can also follow À la carte fashion if you don't want to register all the co
202202
203203
export default defineNuxtConfig({
204204
modules: ['@anu-vue/nuxt', '@unocss/nuxt'],
205-
css: ['@anu-vue/preset-theme-default/dist/style.css'],
206205
})
207206
```
208207
209-
3. Add UnoCSS config file `uno.config.js` as shown in step 2 of [usage](#usage) section.
208+
3. Add UnoCSS config file `uno.config.ts` with this configuration
209+
210+
```ts
211+
import { defineConfig } from 'unocss'
212+
213+
export default defineConfig({
214+
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
215+
})
216+
```
210217
211218
It's done, Let's try button component 🥳
212219

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"private": true,
77
"scripts": {
88
"dev": "pnpm --filter @anu-vue/preset-theme-default stub && pnpm --filter anu-vue dev",
9-
"build": "pnpm -r --filter=./packages/* run build",
9+
"build": "pnpm --filter anu-vue build && pnpm -r --filter=!anu-vue --filter=@anu-vue/preset-* --filter=./packages/* build",
1010
"docs:dev": "pnpm --filter @anu-vue/documentation dev",
1111
"docs:build": "pnpm --filter anu-vue build && pnpm --filter @anu-vue/preset-theme-default build && pnpm --filter @anu-vue/documentation build",
1212
"clean": "rimraf packages/anu-vue/dist && rimraf packages/anu-vue/component-meta && rimraf packages/anu-nuxt/dist && rimraf packages/anu-nuxt/playground/.nuxt && rimraf packages/preset-theme-default/dist",

‎packages/anu-nuxt/package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,22 @@
3333
"dist"
3434
],
3535
"scripts": {
36-
"build": "pnpm dev:prepare && pnpm gen-imports && pnpm nuxt-module-build",
36+
"build": "pnpm dev:prepare && nuxt-module-build",
3737
"dev": "pnpm dev:prepare && nuxi dev playground",
3838
"dev:build": "nuxi build playground",
3939
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
40-
"gen-imports": "na tsx ../../scripts/update-nuxt.ts",
4140
"prepublishOnly": "npm run build"
4241
},
4342
"dependencies": {
44-
"@css-render/vue3-ssr": "^0.15.12",
4543
"@nuxt/kit": "^3.0.0",
44+
"@iconify-json/bx": "latest",
4645
"anu-vue": "workspace:*",
47-
"defu": "^6.1.1"
46+
"@anu-vue/preset-theme-default": "workspace:*"
4847
},
4948
"devDependencies": {
5049
"@nuxt/module-builder": "^0.2.1",
5150
"@nuxt/schema": "^3.0.0",
52-
"@unocss/nuxt": "^0.46.5",
51+
"@unocss/nuxt": "^0.48.0",
5352
"nuxt": "^3.0.0"
5453
}
5554
}

‎packages/anu-nuxt/playground/nuxt.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,4 @@ import anu from '..'
44

55
export default defineNuxtConfig({
66
modules: [anu, '@unocss/nuxt'],
7-
css: ['@anu-vue/preset-theme-default/dist/style.scss'],
87
})

‎packages/anu-nuxt/playground/package.json

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
11
{
22
"private": true,
3-
"name": "my-module-playground",
4-
"devDependencies": {
5-
"@iconify-json/bx": "^1.1.5",
6-
"@unocss/nuxt": "^0.46.5"
7-
},
8-
"dependencies": {
9-
"@anu-vue/preset-theme-default": "workspace:*"
10-
}
3+
"name": "my-module-playground"
114
}

‎packages/anu-nuxt/playground/pages/index.vue

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,63 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
42
const isDialogShown = ref(false)
53
</script>
64

75
<template>
8-
<div class="max-w-2xl mx-auto space-y-10">
6+
<div class="max-w-2xl mx-auto space-y-10 my-8">
7+
<ATypography
8+
class="text-2xl font-bold"
9+
title="Anu Playground"
10+
/>
11+
<div class="grid-row items-center grid-cols-[auto_1fr_auto]">
12+
<!-- 👉 PayPal -->
13+
<AAvatar
14+
icon="i-bx-dollar"
15+
color="success"
16+
class="rounded-lg text-[1.25rem]"
17+
/>
18+
<ATypography
19+
title="PayPal"
20+
subtitle="last payment"
21+
class="text-sm"
22+
/>
23+
<ATypography
24+
:text="['+$789', 'text-success']"
25+
class="text-sm font-semibold place-self-end"
26+
/>
27+
28+
<!-- 👉 Credit card -->
29+
<AAvatar
30+
icon="i-bx-credit-card"
31+
color="danger"
32+
class="rounded-lg text-[1.25rem]"
33+
/>
34+
<ATypography
35+
title="Credit card"
36+
subtitle="ordered books"
37+
class="text-sm"
38+
/>
39+
<ATypography
40+
:text="['-$13.6', 'text-danger']"
41+
class="text-sm font-semibold place-self-end"
42+
/>
43+
44+
<!-- 👉 Server storage -->
45+
<AAvatar
46+
icon="i-bx-server"
47+
color="warning"
48+
class="rounded-lg text-[1.25rem]"
49+
/>
50+
<ATypography
51+
title="Server storage"
52+
subtitle="90% storage used"
53+
class="text-sm"
54+
/>
55+
<ATypography
56+
:text="['4 minutes ago', 'text-warning']"
57+
class="text-sm font-semibold place-self-end"
58+
/>
59+
</div>
60+
961
<div class="grid-row">
1062
<AAlert>
1163
Fruitcake I love liquorice apple pie croissant.
@@ -44,7 +96,7 @@ const isDialogShown = ref(false)
4496
/>
4597

4698
<!-- Image -->
47-
<AAvatar src="/images/demo/portrait-1.jpg" />
99+
<AAvatar src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
48100
</div>
49101

50102
<div class="flex items-center flex-wrap gap-8">
@@ -66,7 +118,7 @@ const isDialogShown = ref(false)
66118
offset-x="16"
67119
offset-y="16"
68120
>
69-
<AAvatar src="/images/demo/portrait-1.jpg" />
121+
<AAvatar src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
70122
</ABadge>
71123
</div>
72124

‎packages/anu-nuxt/playground/unocss.config.ts

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,5 @@
1-
import { presetThemeDefault } from '@anu-vue/preset-theme-default'
21
import type { UnocssNuxtOptions } from '@unocss/nuxt'
3-
import presetIcons from '@unocss/preset-icons'
4-
import presetUno from '@unocss/preset-uno'
5-
import { presetAnu } from 'anu-vue'
62

73
export default <UnocssNuxtOptions>{
8-
preflight: false,
9-
presets: [
10-
presetUno(),
11-
presetIcons({
12-
scale: 1.2,
13-
extraProperties: {
14-
'height': '1.5em',
15-
'flex-shrink': '0',
16-
'display': 'inline-block',
17-
},
18-
}),
19-
20-
// anu-vue presets
21-
presetAnu(),
22-
presetThemeDefault(),
23-
],
244
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
25-
265
}

‎packages/anu-nuxt/src/module.ts

Lines changed: 78 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,105 @@
1-
/* eslint-disable @typescript-eslint/no-use-before-define */
1+
import { presetThemeDefault } from '@anu-vue/preset-theme-default'
22
import {
3-
addComponent,
4-
addImportsSources,
5-
addPlugin,
6-
createResolver,
7-
defineNuxtModule
3+
addPlugin,
4+
createResolver,
5+
defineNuxtModule,
86
} from '@nuxt/kit'
7+
import presetIcons from '@unocss/preset-icons'
8+
import presetUno from '@unocss/preset-uno'
9+
import { presetAnu, presetIconExtraProperties } from 'anu-vue'
910

1011
import { name, version } from '../package.json'
1112

12-
export interface ModuleOptions {}
13+
const configKey = 'anu'
14+
15+
/** Nuxt Module Options */
16+
interface PresetThemeOptions {
17+
18+
/**
19+
* Import Anu Preset Theme with either CSS or SASS
20+
* You can either import CSS which doesn't require any additional setup
21+
* or SASS which requires you to install `sass` dependencies.
22+
*
23+
* @default 'css'
24+
*/
25+
style?: 'css' | 'sass'
26+
}
27+
28+
export interface ModuleOptions {
29+
30+
/**
31+
* Import Anu Preset Theme Default | Source npm pkg: `@anu-vue/preset-theme-default`
32+
* When enabled, it will automatically set up the default presets for Anu and Uno.
33+
* We recommend to enable this option to get the best experience.
34+
*
35+
* @default true
36+
*/
37+
presetTheme?: PresetThemeOptions | boolean
38+
}
1339

1440
export default defineNuxtModule<ModuleOptions>({
41+
defaults: {
42+
presetTheme: true,
43+
},
1544
meta: {
1645
name,
1746
version,
18-
configKey: 'anuVue',
47+
configKey,
1948
compatibility: {
2049
nuxt: '^3.0.0',
2150
},
2251
},
23-
setup(moduleOptions, nuxt) {
52+
setup(opts, nuxt) {
2453
const { resolve } = createResolver(import.meta.url)
2554

2655
nuxt.options.css.push('anu-vue/dist/style.css')
2756

57+
if (opts.presetTheme === true || typeof opts.presetTheme === 'object') {
58+
nuxt.options.unocss = nuxt.options.unocss || {}
59+
60+
const ext = typeof opts.presetTheme === 'object' ? opts.presetTheme.style : 'css'
61+
nuxt.options.css.push(`@anu-vue/preset-theme-default/dist/style.${ext}`)
62+
63+
const iconPreset = !!nuxt.options.unocss?.icons || true
64+
nuxt.options.unocss.preflight = false
65+
66+
// Add default presets for Anu into the unocss options.
67+
nuxt.options.unocss.presets = [
68+
// @ts-expect-error - We know that is a valid preset
69+
presetUno(),
70+
71+
// @ts-expect-error - We know that is a valid preset
72+
presetAnu(),
73+
74+
// @ts-expect-error - We know that is a valid preset
75+
presetThemeDefault(),
76+
...(nuxt.options.unocss.presets || []),
77+
]
78+
79+
// If icon preset is enabled via `unocss.icons` option, add it to the presets.
80+
// Default to `true` if `unocss.icons` is not defined.
81+
if (iconPreset) {
82+
// Icon Preset Anu by default
83+
const presetIcon = presetIcons(typeof iconPreset === 'object'
84+
? iconPreset
85+
: {
86+
scale: 1.2,
87+
extraProperties: presetIconExtraProperties,
88+
},
89+
)
90+
91+
// @ts-expect-error - We know that is a valid preset
92+
nuxt.options.unocss.presets?.push(presetIcon)
93+
}
94+
}
95+
2896
nuxt.hook('prepare:types', ({ tsConfig, references }) => {
2997
tsConfig.compilerOptions!.types.push('anu-vue/volar')
3098
references.push({
31-
path: resolve(nuxt.options.buildDir, 'types/anu-vue.d.ts'),
99+
types: 'anu-vue/volar',
32100
})
33101
})
34102

35103
addPlugin({ src: resolve('./runtime/plugin') })
36-
37-
// Add auto-imported components
38-
anuComponentNames.map(name =>
39-
addComponent({
40-
name,
41-
export: name,
42-
filePath: 'anu-vue',
43-
}),
44-
)
45-
46-
addImportsSources([
47-
{
48-
from: 'anu-vue',
49-
imports: anuComposables,
50-
},
51-
])
52104
},
53105
})
54-
55-
const anuComponentNames = [
56-
'AAlert',
57-
'AAvatar',
58-
'ABadge',
59-
'ABaseInput',
60-
'ABtn',
61-
'ACard',
62-
'ACheckbox',
63-
'AChip',
64-
'ADataTable',
65-
'ADialog',
66-
'ADrawer',
67-
'AInput',
68-
'AList',
69-
'AListItem',
70-
'AMenu',
71-
'ARadio',
72-
'ARating',
73-
'ASelect',
74-
'ASwitch',
75-
'ATable',
76-
'ATextarea',
77-
'ATypography',
78-
]
79-
80-
const anuComposables = [
81-
'useConfigurable',
82-
'useDOMScrollLock',
83-
'useGroupModel',
84-
'useInternalBooleanState',
85-
'useLayer',
86-
'useSearch',
87-
'useSort',
88-
'useSpacing',
89-
'useTeleport',
90-
// 'useProps',
91-
]
92-
93-
declare module '@nuxt/schema' {
94-
interface ConfigSchema {
95-
runtimeConfig: {
96-
public?: {
97-
anu?: ModuleOptions
98-
}
99-
}
100-
}
101-
}

0 commit comments

Comments
 (0)