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

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

daisyUI Components in Vue.js

Click on the icon

daisyUI Components in Vue.js

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>

daisyUI Components in Vue.js

Now click on the emoji 

daisyUI Components in Vue.js

Summary

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


Similar Articles