{"id":21181975,"url":"https://github.com/daief/daisyui-vue","last_synced_at":"2025-05-07T08:12:34.206Z","repository":{"id":61618996,"uuid":"405595622","full_name":"daief/daisyui-vue","owner":"daief","description":"(WIP) Vue3 UI components based on daisyui.","archived":false,"fork":false,"pushed_at":"2023-06-29T12:04:28.000Z","size":11437,"stargazers_count":172,"open_issues_count":4,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-07T08:12:26.950Z","etag":null,"topics":["daisyui","taildwind","vite","vue3"],"latest_commit_sha":null,"homepage":"https://daief.tech/daisyui-vue/components/button","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daief.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-12T09:07:52.000Z","updated_at":"2025-04-11T07:37:00.000Z","dependencies_parsed_at":"2024-06-20T22:08:54.225Z","dependency_job_id":null,"html_url":"https://github.com/daief/daisyui-vue","commit_stats":{"total_commits":308,"total_committers":3,"mean_commits":"102.66666666666667","dds":0.00649350649350644,"last_synced_commit":"8150491449dc47467bf1dad98c9789e29dd5f127"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daief%2Fdaisyui-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daief%2Fdaisyui-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daief%2Fdaisyui-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daief%2Fdaisyui-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daief","download_url":"https://codeload.github.com/daief/daisyui-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252839296,"owners_count":21812090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["daisyui","taildwind","vite","vue3"],"created_at":"2024-11-20T17:53:32.981Z","updated_at":"2025-05-07T08:12:34.174Z","avatar_url":"https://github.com/daief.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# daisyui-vue(WIP)\n\nVue3 UI components based on [daisyui](https://github.com/saadeghi/daisyui).\n\n\u003e \u003csmall\u003eWork is busy, and progress is slow.\u003c/small\u003e\n\n## Usage\n\nInstallation:\n\n```bash\n$ pnpm add daisyui-vue\n# or\n$ npm add daisyui-vue\n# or\n$ yarn add daisyui-vue\n```\n\nImport All(❌ not recommended):\n\n```tsx\n// main.ts\nimport daisyui from 'daisyui-vue';\nimport { createApp, defineComponent } from 'vue';\n\napp.use(daisyui); // register all components expect icons\n\n// App.tsx\nconst App = defineComponent({\n  // ...\n  setup: () =\u003e {\n    return () =\u003e {\n      return (\n        \u003cdiv\u003e\n          \u003cdv-button\u003eclick\u003c/dv-button\u003e\n        \u003c/div\u003e\n      );\n    };\n  },\n});\n```\n\nImport On-demand(👍 recommended):\n\n```tsx\n// App.tsx\n// import what you need\nimport { Button } from 'daisyui-vue';\n\nconst App = defineComponent({\n  // ...\n  setup: () =\u003e {\n    return () =\u003e {\n      return (\n        \u003cdiv\u003e\n          \u003cButton\u003eclick\u003c/Button\u003e\n        \u003c/div\u003e\n      );\n    };\n  },\n});\n```\n\nAvoid `FOUC` problem when SSR:\n\n```tsx\n// entry-server.ts\nimport { STYLE_MANAGER_CONTEXT_SYMBOL, StyleManager } from 'daisyui-vue';\n\nexport function render() {\n  const app = createApp({\n    // ...\n  });\n\n  const styleManager = new StyleManager();\n  app.provide(STYLE_MANAGER_CONTEXT_SYMBOL, styleManager);\n\n  const html = renderToString(app);\n\n  const styleTagStr = styleManager.extractStyles(); // \u003cstyle\u003e...\u003c/style\u003e\n\n  return html.replace('\u003c!-- YOUR_STYLE_PLACEHOLDER --\u003e', styleTagStr);\n}\n```\n\n## TODOs\n\n- [x] style files\n  - [x] auto require style conntent when using a component (now css-in-js)\n    - [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.\n- [x] media query \u0026 responsive\n- [x] refine style insertion detect(~~maybe use a content hash~~ self-increasing id)\n- [x] pre insert all global style\n- [ ] popper/modal/drawer animation(maybe some preset animations)\n  - [x] modal, drawer\n- [x] refine theme usage\n- [ ] inline-block(radio, checkbox, toggle) vertical-align\n- [ ] fix types check\n\n## Naming Rules\n\n- event handler name, `onNameAction`: onMaskClick、onEscKeyDown\n- action flag name, `xxxYyable`: keyboardCloseable\n- responsive: mobile first\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaief%2Fdaisyui-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaief%2Fdaisyui-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaief%2Fdaisyui-vue/lists"}