https://github.com/daief/daisyui-vue

(WIP) Vue3 UI components based on daisyui.
https://github.com/daief/daisyui-vue

daisyui taildwind vite vue3

Last synced: 7 days ago
JSON representation

(WIP) Vue3 UI components based on daisyui.

• Host: GitHub
• URL: https://github.com/daief/daisyui-vue
• Owner: daief
• License: apache-2.0
• Created: 2021-09-12T09:07:52.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-06-29T12:04:28.000Z (over 1 year ago)
• Last Synced: 2024-01-23T03:07:53.718Z (12 months ago)
• Topics: daisyui, taildwind, vite, vue3
• Language: TypeScript
• Homepage: https://daief.tech/daisyui-vue/components/button
• Size: 10.9 MB
• Stars: 139
• Watchers: 3
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# daisyui-vue(WIP)

Vue3 UI components based on [daisyui](https://github.com/saadeghi/daisyui).

> Work is busy, and progress is slow.

## Usage

Installation:

```bash

$ pnpm add daisyui-vue

# or

$ npm add daisyui-vue

# or

$ yarn add daisyui-vue

```

Import All(❌ not recommended):

```tsx

// main.ts

import daisyui from 'daisyui-vue';

import { createApp, defineComponent } from 'vue';

app.use(daisyui); // register all components expect icons

// App.tsx

const App = defineComponent({

  // ...

  setup: () => {

    return () => {

      return (

        


          click

        

      );

    };

  },

});

```


Import On-demand(👍 recommended):

```tsx

// App.tsx

// import what you need

import { Button } from 'daisyui-vue';

const App = defineComponent({

  // ...

  setup: () => {

    return () => {

      return (

        


          click

        

      );

    };

  },

});

```


Avoid `FOUC` problem when SSR:

```tsx

// entry-server.ts

import { STYLE_MANAGER_CONTEXT_SYMBOL, StyleManager } from 'daisyui-vue';

export function render() {

  const app = createApp({

    // ...

  });

  const styleManager = new StyleManager();

  app.provide(STYLE_MANAGER_CONTEXT_SYMBOL, styleManager);

  const html = renderToString(app);

  const styleTagStr = styleManager.extractStyles(); // ...

  return html.replace('', styleTagStr);

}

```

## TODOs

- [x] style files

  - [x] auto require style conntent when using a component (now css-in-js)

    - [x] ~~it is easy to use in SSR, but there is no style on first render (`FOUC`, because css inserted by js)~~. Use `extractStyles` to extract critical css.

- [x] media query & responsive

- [x] refine style insertion detect(~~maybe use a content hash~~ self-increasing id)

- [x] pre insert all global style

- [ ] popper/modal/drawer animation(maybe some preset animations)

  - [x] modal, drawer

- [x] refine theme usage

- [ ] inline-block(radio, checkbox, toggle) vertical-align

- [ ] fix types check

## Naming Rules

- event handler name, `onNameAction`: onMaskClick、onEscKeyDown

- action flag name, `xxxYyable`: keyboardCloseable

- responsive: mobile first