Using DaisyUI Components In Vue.js

In this article, I will guide you on how to install and use daisyUI Components in Vue.js.

Prerequisites:

• node.js installed
• Tailwind CSS

You can check how to install Tailwind CSS  in vue.js from the below link

• How To Add Tailwind CSS n Vue.js

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal.

vue create tailwindcss

Install daisyUI

Install daisyUI using following npm command

npm i daisyui

Open tailwind.config.js and add following code.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Now right-click on the components folder and add a new component named 'dailyuidemo.vue'. Now open dailyuidemo.vue component and add the following code. In the article, I will use daisyUI swap component.

<template>
    <div class="justify-center flex bg-blue-300 items-center h-screen">
        <label class="swap">
  <input type="checkbox" />
  <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/></svg>
  <svg class="swap-off fill-current" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z"/></svg>
</label>
    </div>
</template>
  <script>
export default {
    name: 'dailyUIdemo',
    props: {
        msg: String
    }
}
</script>
  <style scoped>
  h3 {
      margin: 40px 0 0;
  }
  ul {
      list-style-type: none;
      padding: 0;
  }
  li {
      display: inline-block;
      margin: 0 10px;
  }
  a {
      color: #42b983;
  }
  </style>

Now open App.vue component and add the following code.

<template>
  <div id="app">
    <dailyUIdemo msg="Welcome to Your Vue.js App" />
  </div>
</template>
<script>
import dailyUIdemo from './components/dailyuidemo.vue'
export default {
  name: 'App',
  components: {
    dailyUIdemo
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now run the application by using following command.

npm run serve

Click on the icon

Now open dailyuidemo.vue component and add the following code and check the result.

<template>
    <div class="justify-center flex  items-center h-screen">
        <label class="swap swap-flip text-9xl">
  <input type="checkbox" />
  <div class="swap-on">😈</div>
  <div class="swap-off">😇</div>
</label>
    </div>
</template>
  <script>
export default {
    name: 'dailyUIdemo',
    props: {
        msg: String
    }
}
</script>
  <style scoped>
  h3 {
      margin: 40px 0 0;
  }
  
  ul {
      list-style-type: none;
      padding: 0;
  }
  
  li {
      display: inline-block;
      margin: 0 10px;
  }
  
  a {
      color: #42b983;
  }
  </style>

Now click on the emoji 

Summary

 In this article, we learned how to use daisyUI Components in Vue.js.