Vue3 UI components based on daisyui.
Work is busy, and progress is slow.
Installation:
$ pnpm add daisyui-vue
# or
$ npm add daisyui-vue
# or
$ yarn add daisyui-vue
Import All(❌ not recommended):
// 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 (
<div>
<dv-button>click</dv-button>
</div>
);
};
},
});
Import On-demand(👍 recommended):
// App.tsx
// import what you need
import { Button } from 'daisyui-vue';
const App = defineComponent({
// ...
setup: () => {
return () => {
return (
<div>
<Button>click</Button>
</div>
);
};
},
});
Avoid FOUC
problem when SSR:
// 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(); // <style>...</style>
return html.replace('<!-- YOUR_STYLE_PLACEHOLDER -->', styleTagStr);
}
FOUC
, because css inserted by js)extractStyles
to extract critical css.onNameAction
: onMaskClick、onEscKeyDownxxxYyable
: keyboardCloseable