onu-ui / onu-ui

Bullheaded and lightweight UnoCSS ui library.

Home Page:https://onu.zyob.top

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature Request] - Add a nuxt module

ProsperBao opened this issue · comments

Clear and concise description of the problem

I want to use this component library in Nuxt, with automatic importing and tree shaking. I didn't see any relevant configuration in the code repository and documentation, only unplugin related information.

Suggested solution

I think can be added to the component library. It can also be added to the Nuxt repository.

Describe alternatives you've considered

Here is my simple code:

import { addComponent, defineNuxtModule } from '@nuxt/kit'

const COMPONENT_LIST = [
  'OAffix',
  'OAlert',
  'OAvatar',
  'OAvatarGroup',
  'OBacktop',
  'OBadge',
  'OButton',
  'OButtonGroup',
  'OCard',
  'OCheckbox',
  'OCollapse',
  'OCollapseItem',
  'OConfigProvider',
  'OEmpty',
  'OIcon',
  'OLink',
  'OMessage',
  'OPopup',
  'OProgress',
  'ORadio',
  'ORadioGroup',
  'ORate',
  'OSwitch',
  'OTag',
  'OText',
  'OToolTip',
  'OTrigger',
]

export default defineNuxtModule({
  meta: {
    name: '@onu/nuxt',
    configKey: 'onu',
    compatibility: {
      nuxt: '^3.0.0',
    },
  },
  async setup() {
    COMPONENT_LIST.forEach((name) => {
      addComponent({
        name,
        export: name,
        filePath: 'onu-ui',
      })
    })
  },
})

Screenshots or Videos

image
image

For those who are impatient like me and want to utilize this now:

  • Make sure onu-ui package is installed.
  • Create a modules folder in your Nuxt project root, if you don't already have one.
  • Create a new file: modules/onu-ui.ts > copy and paste in the code given by FuBaooo above.

If you have debug enabled in nuxt.config.ts, you will see the module load up

Thank you for this contribution! @FuBaooo

commented

Added on #177

There are still some problems with this package. I will release it after I fix it in my spare time. Thanks all guys.