simple-daisy-vue v1.2.0

Installation

This installation procedure is the recommended way of using this component library. It involves:

• using alongside Tailwind and Daisy as a peer depenedency for maximum stylistic control
• importing components on an as needed basis for the sake of performance (tree-shakable)

!TIP This is the recommended approach for Vite users!

Step 1. Install the Core Library

::: code-group

npm install simple-daisy-vue

pnpm add simple-daisy-vue

yarn add simple-daisy-vue

:::

Step 2. Configure Tailwind CSS

Use the official Tailwind installation guide for Vite/Vue. However, you do not have to do the actual install step, as it's already installed as a dependency of simple-daisy-vue.

Make sure your tailwind config includes the following:

import daisyui from 'daisyui'

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/simple-daisy-vue/src/{components,directives}/**/*.{vue,ts}'
  ],
  plugins: [daisyui]
}

Step 3. Import the Component of Your Choice and Start Using

:::code-group

<script setup lang="ts">
import { SimpleAlert } from 'simple-daisy-vue'
</script>

<template>
  <SimpleAlert type="success"> Great! You've Successfully Installed simple-daisy-vue </SimpleAlert>
</template>

:::

Installation (Global Components)

This installation procedure IS NOT the recommended way of using this component library, but is the quickest way to get up and going and start playing around with SimpleDaisyVue.

It involves:

• importing a stylesheet generated by the library authors at build time and doesn't require Tailwind or Daisy UI installed in your current project (but NO tailwind classes will work except those already generated)
• Using a Vue Plugin to globally install all components at once

!WARNING This IS NOT the recommended approach for installation.

Step 1. Install the Core Library

::: code-group

npm install simple-daisy-vue

pnpm add simple-daisy-vue

yarn add simple-daisy-vue

:::

Step 2. Register the Plugin and Styles

:::code-group

import { createApp } from 'vue'
import App from './App.vue'

import { Plugin as SimpleDaisyVuePlugin } from 'simple-daisy-vue'

createApp(app).use(SimpleDaisyVuePlugin).mount('#app')

:::

Step 3. Start Using the Components

:::code-group

<template>
  <SimpleAlert type="success"> Great! You've Successfully Installed DaisyVue </SimpleAlert>
</template>

:::