Logo

dev-resources.site

for different kinds of informations.

Configurar DaisyUI con Vue3

Published at
1/29/2023
Categories
tailwindcss
daisyui
vue
vite
Author
elcascarudodev
Categories
4 categories in total
tailwindcss
open
daisyui
open
vue
open
vite
open
Author
14 person written this
elcascarudodev
open
Configurar DaisyUI con Vue3

Con estos sencillos pasos tenemos configurado DeisyUI en nuestro proyecto VueJS con Vite

Crear proyecto

yarn create vite
Enter fullscreen mode Exit fullscreen mode

√ Project name: ... config-daisy-ui
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Dependencias de desarrollo

yarn add -D \
@vue/compiler-sfc \
autoprefixer \
daisyui \
postcss \
tailwindcss
Enter fullscreen mode Exit fullscreen mode

Archivos de configuración

postcss.config.cjs

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};
Enter fullscreen mode Exit fullscreen mode

tailwind.config.cjs

module.exports = {
  content: ['./src/**/*.{vue,js,ts}'],
  plugins: [require('daisyui')],
};
Enter fullscreen mode Exit fullscreen mode

src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

src/style.css

@import './tailwind.css';
...
Enter fullscreen mode Exit fullscreen mode

Repositorio GIT

vue 3 + vite + DaisyUI

daisyui Article's
22 articles in total
Favicon
Creating a To-Do app with HTMX and Django - Part 3: Creating the frontend and adding HTMX
Favicon
What is DaisyUI? Advantages, Disadvantages, and FAQ’s
Favicon
DaisyUI: CSS Components for Tailwind
Favicon
Discover the beauty of simplicity with 𝗗𝗮𝗶𝘀𝘆𝗨𝗜! 🚀
Favicon
daisyUI adoption guide: Overview, examples, and alternatives
Favicon
Getting started with Tailwind + Daisy UI in Angular 18
Favicon
🎉 My First Shot at a Vue Library: Introducing masc-vue!🌟
Favicon
Binary Duel, front-end in 2 weeks with Svelte and DaisyUI
Favicon
My Journey with Svelte: From Vue to Svelte and the Joy of Pure JS Libraries
Favicon
Stop flickering theme after page refresh in Sveltekit and Daisy UI
Favicon
DevTips – DaisyUi (Rating, Carousel)
Favicon
Building Contact Form in React with DaisyUI and Tailwind CSS
Favicon
Create an Emoji Selector for Next.js Forms using Tailwind + DaisyUI
Favicon
Install TailwindCSS and DaisyUI CSS Plugin with Angular
Favicon
Configurar DaisyUI con Vue3
Favicon
Setting up DaisyUI, Tailwind, Vue and Vite
Favicon
How to build a multi step form in Vue
Favicon
DaisyUIでデコったPhoenixアプリをFly.ioにデプロイして楽しむ(2022年)
Favicon
Get started creating beautiful designs with daisyUI
Favicon
Quick Prototyping with Tailwind and DaisyUI
Favicon
Adding Tailwind and Daisy UI to SvelteKit
Favicon
Sveltekit web gallery app

Featured ones: