Daisyui-vue NPM

daisyui-vue

基于 daisyui 封装的 vue 组件库。

Usage

全局注册：

// main.ts
import daisyui from 'daisyui-vue';
import { createApp, defineComponent } from 'vue';

app.use(daisyui); // 注册

// App.tsx
const App = defineComponent({
  // ...
  setup: () => {
    return () => {
      return (
        <div>
          <dv-button>click</dv-button>
        </div>
      );
    };
  },
});

按需使用：

// main.ts
import { installTheme } from 'daisyui-vue';

const app = createApp({
  // ...
});

app.use(installTheme); // 注册组件库 context，当需要提取首屏样式时使用，否则可以不注册

// App.tsx
import { Button } from 'daisyui-vue';

const App = defineComponent({
  // ...
  setup: () => {
    return () => {
      return (
        <div>
          <Button>click</Button>
        </div>
      );
    };
  },
});

SSR 提取首屏样式，避免 FOUC 问题：

// entry-server.ts

export function render() {
  const app = createApp({
    // ...
  });

  const style = app.config.globalProperties.$daisyui.style.extractStyles(); // <style>...</style>

  const html = renderToString(app);

  return html.replace('<!-- YOUR_STYLE_PLACEHOLDER -->', style);
}

Todo

style files
- auto require style conntent when using a component (now css-in-js)
  - ~~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.
media query & responsive
refine style insertion detect(~~maybe use a content hash~~ self-increasing id)
pre insert all global style
popper/modal/drawer animation(maybe some preset animations)
- modal, drawer