Skip to content
139 changes: 72 additions & 67 deletions src/module.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { defu } from 'defu'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addPlugin, hasNuxtModule } from '@nuxt/kit'
import type { HookResult } from '@nuxt/schema'
import type { ModuleDependencies } from 'nuxt/schema'
import { addTemplates } from './templates'
import { defaultOptions, getDefaultConfig, resolveColors } from './utils/defaults'
import { name, version } from '../package.json'
Expand Down Expand Up @@ -120,10 +121,76 @@ export default defineNuxtModule<ModuleOptions>({
docs: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
configKey: 'ui',
compatibility: {
nuxt: '>=4.0.0'
nuxt: '>=4.1.0'
}
},
defaults: defaultOptions,
moduleDependencies(nuxt): ModuleDependencies {
const userUiOptions = nuxt.options.ui || {}
return {
'@nuxt/icon': {
defaults: {
cssLayer: 'components'
}
},
...userUiOptions.fonts !== false && {
'@nuxt/fonts': {
defaults: {
defaults: {
weights: [400, 500, 600, 700]
}
}
}
},
...userUiOptions.colorMode !== false && {
'@nuxtjs/color-mode': {
defaults: {
classSuffix: '',
disableTransition: true
}
}
},
'@nuxtjs/mdc': {
optional: !userUiOptions.mdc && !userUiOptions.content,
defaults: {
highlight: {
theme: {
light: 'material-theme-lighter',
default: 'material-theme',
dark: 'material-theme-palenight'
}
},
components: {
map: {
'accordion': 'ProseAccordion',
'accordion-item': 'ProseAccordionItem',
'badge': 'ProseBadge',
'callout': 'ProseCallout',
'card': 'ProseCard',
'card-group': 'ProseCardGroup',
'caution': 'ProseCaution',
'code-collapse': 'ProseCodeCollapse',
'code-group': 'ProseCodeGroup',
'code-icon': 'ProseCodeIcon',
'code-preview': 'ProseCodePreview',
'code-tree': 'ProseCodeTree',
'collapsible': 'ProseCollapsible',
'field': 'ProseField',
'field-group': 'ProseFieldGroup',
'icon': 'ProseIcon',
'kbd': 'ProseKbd',
'note': 'ProseNote',
'steps': 'ProseSteps',
'tabs': 'ProseTabs',
'tabs-item': 'ProseTabsItem',
'tip': 'ProseTip',
'warning': 'ProseWarning'
}
}
}
}
}
},
async setup(options, nuxt) {
const { resolve } = createResolver(import.meta.url)

Expand All @@ -149,71 +216,9 @@ export default defineNuxtModule<ModuleOptions>({
nuxt.options.postcss.plugins['@tailwindcss/postcss'] = {}
}

async function registerModule(name: string, key: string, options: Record<string, any>) {
if (!hasNuxtModule(name)) {
await installModule(name, defu((nuxt.options as any)[key], options))
} else {
(nuxt.options as any)[key] = defu((nuxt.options as any)[key], options)
}
}

await registerModule('@nuxt/icon', 'icon', {
cssLayer: 'components'
})
if (options.fonts) {
await registerModule('@nuxt/fonts', 'fonts', {
defaults: {
weights: [400, 500, 600, 700]
}
})
}
if (options.colorMode) {
await registerModule('@nuxtjs/color-mode', 'colorMode', {
classSuffix: '',
disableTransition: true
})
}

addPlugin({ src: resolve('./runtime/plugins/colors') })

if ((hasNuxtModule('@nuxtjs/mdc') || options.mdc) || (hasNuxtModule('@nuxt/content') || options.content)) {
nuxt.options.mdc = defu(nuxt.options.mdc, {
highlight: {
theme: {
light: 'material-theme-lighter',
default: 'material-theme',
dark: 'material-theme-palenight'
}
},
components: {
map: {
'accordion': 'ProseAccordion',
'accordion-item': 'ProseAccordionItem',
'badge': 'ProseBadge',
'callout': 'ProseCallout',
'card': 'ProseCard',
'card-group': 'ProseCardGroup',
'caution': 'ProseCaution',
'code-collapse': 'ProseCodeCollapse',
'code-group': 'ProseCodeGroup',
'code-icon': 'ProseCodeIcon',
'code-preview': 'ProseCodePreview',
'code-tree': 'ProseCodeTree',
'collapsible': 'ProseCollapsible',
'field': 'ProseField',
'field-group': 'ProseFieldGroup',
'icon': 'ProseIcon',
'kbd': 'ProseKbd',
'note': 'ProseNote',
'steps': 'ProseSteps',
'tabs': 'ProseTabs',
'tabs-item': 'ProseTabsItem',
'tip': 'ProseTip',
'warning': 'ProseWarning'
}
}
})

if (options.mdc || options.content || hasNuxtModule('@nuxtjs/mdc') || hasNuxtModule('@nuxt/content')) {
addComponentsDir({
path: resolve('./runtime/components/prose'),
pathPrefix: false,
Expand All @@ -222,15 +227,15 @@ export default defineNuxtModule<ModuleOptions>({
})
}

if ((hasNuxtModule('@nuxt/content') || options.content)) {
if (options.content || hasNuxtModule('@nuxt/content')) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've swapped these in every instance as checking options.content is always going to be more performant than calling hasNuxtModule

addComponentsDir({
path: resolve('./runtime/components/content'),
pathPrefix: false,
prefix: options.prefix
})
}

if (hasNuxtModule('@nuxtjs/color-mode')) {
if (options.colorMode || hasNuxtModule('@nuxtjs/color-mode')) {
addComponentsDir({
path: resolve('./runtime/components/color-mode'),
pathPrefix: false,
Expand Down
Loading