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.

Dies ist kein offizielles daisyUI-Produkt, sondern eine von Martz.digital (alias Jonathan Martz) entwickelte Bibliothek.

Komponenten-Showcase

DaisyHero

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.

DaisyHero – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`actionSize`
		`bgImage`	`string`
		`className`	`string`
		`ctaText`	`string`
		`description`	`string`
		`descriptionSize`
		`imageAlt`	`string`
		`imageUrl`	`string`
		`layout`
		`title`	`string`
		`titleSize`
		`variant`

Live-Vorschau

Dein nächstes Projekt

Ein Hero mit Titel, Beschreibung und einem frei belegbaren Actions-Slot.

Komponenten entdecken

Für dein Projekt

DaisyHero – Vollständiger Vue-Code

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

<template>
  <DaisyHero
      title="Dein nächstes Projekt"
      description="Ein Hero mit Titel, Beschreibung und einem frei belegbaren Actions-Slot."
      layout="center"
      class-name="bg-base-100"
  >
    <template #actions>
      <a href="/showcase" class="btn btn-primary">Komponenten entdecken</a>
    </template>
  </DaisyHero>
</template>