Daisyui Vue

Overview:

daisyui-vue is a work in progress Vue3 UI component library that is based on daisyui framework. The development progress is slow due to a busy workload.

Features:

• Style files are automatically required when using a component.
• Supports media query and responsive design.
• Provides modal and drawer components.
• Has a refined theme usage.
• Supports inline-block, vertical-align, and fix types check.
• Follows naming rules for event handlers and action flags.
• Provides responsive design with a mobile-first approach.

Installation:

Import All (not recommended):

import 'daisyui-vue/dist/full.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Import On-demand (recommended):

import 'daisyui-vue/dist/full.css';
import { createApp } from 'vue';
import { Button, Modal, Drawer } from 'daisyui-vue';

const app = createApp(App);
app.component('Button', Button);
app.component('Modal', Modal);
app.component('Drawer', Drawer);

app.mount('#app');

Avoid FOUC problem when SSR:

TODOs

• Style files
• Auto require style content 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
• Refine theme usage
• inline-block (radio, checkbox, toggle) vertical-align
• Fix types check

Naming Rules:

• Event handler name: onNameAction (e.g., onMaskClick, onEscKeyDown)
• Action flag name: xxxYyable (e.g., keyboardCloseable)

Responsive:

• Mobile first approach