Gut zu wissen:

Speichere den kopierten Code als .vue-Datei. Dein Projekt benötigt Vue 3, vue-daisyui-components und Tailwind CSS mit daisyUI. Binde vue-daisyui-components/styles.css global ein.

Komponenten-Showcase

DaisyButton

Ein einfaches Nutzungsbeispiel aus vue-daisyui-components – ohne zusätzliche Anwendungslogik.

Props-Referenz

Definitionen aus defineProps der installierten Komponente. Eine aktivierte Checkbox kennzeichnet ein erforderliches Prop. Typnamen verweisen auf die Typen der Bibliothek.

DaisyButton – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`active`	`boolean`
		`block`	`boolean`
		`circle`	`boolean`
		`className`	`string`
		`disabled`	`boolean`
		`loading`	`boolean`
		`outline`	`boolean`
		`responsiveSize`
		`size`
		`square`	`boolean`
		`textSize`
		`type`
		`variant`

Live-Vorschau

Für dein Projekt

DaisyButton – Vollständiger Vue-Code

<script setup lang="ts">
import DaisyButton from 'vue-daisyui-components/components/DaisyButton.vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <DaisyButton variant="primary">Primär</DaisyButton>
    <DaisyButton variant="secondary" outline>Outline</DaisyButton>
    <DaisyButton variant="accent" size="sm">Klein</DaisyButton>
    <DaisyButton variant="ghost">Ghost</DaisyButton>
    <DaisyButton disabled>Deaktiviert</DaisyButton>
    <DaisyButton loading>Lädt</DaisyButton>
  </div>
</template>