VueJS + Tailwind + DaisyUI = 😎🌷

Vue é um robusto framework JavaScript dedicado à construção de interfaces de usuário interativas e dinâmicas. Esta ferramenta poderosa é construída sobre os fundamentos da web moderna: HTML, CSS e JavaScript. Com um modelo de programação declarativo e baseado em componentes, o Vue capacita os desenvolvedores a criar interfaces de usuário de qualquer complexidade de forma eficiente e organizada.

Além disso, abrange a maioria dos recursos comuns necessários no desenvolvimento de frontend. No entanto, a web é extremamente diversa – as coisas que construímos na web podem variar drasticamente em forma e escala. Com isso em mente, Vue é projetado para ser flexível e adotável incrementalmente. Dependendo do seu caso de uso, Vue pode ser utilizado de diferentes maneiras:

• Aprimorando HTML estático sem um passo de compilação
• Incorporando como Componentes da Web em qualquer página
  Aplicação de Página Única (SPA)
• Fullstack / Renderização do Lado do Servidor (SSR)
• Jamstack / Geração de Site Estático (SSG)
• Direcionamento para desktop, mobile, WebGL e até mesmo o terminal

Para criar um novo projeto Vue, certifique-se de ter uma versão atualizada do Node.js instalada e que seu diretório de trabalho atual seja o onde pretende criar um projeto. Execute o seguinte comando em sua linha de comando:

npm create vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No Scaffolding project in ./<your-project-name>...
Done.

cd <your-project-name>
npm install
npm run dev

Com isso você já possui um projeto Vue sendo executado localmente.

O projeto pode ser integrado com Tailwind CSS, sendo
um framework CSS orientado para utilitários, repleto de classes como flex, pt-4, text-center e rotate-90, que podem ser combinadas para construir qualquer design diretamente em seu markup.

Para instalá-lo em seu projeto, basta executar a instalação das dependências abaixo:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure o arquivo tailwind.config.js adicionando em seu content as diretivas:

content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}",],

Adicione as diretivas do tailwind no arquivo CSS carregado no componente central (ou carrego-o manualmente com as diretivas abaixo):

@tailwind base;
@tailwind components;
@tailwind utilities;

Para finalizar a configuração do projeto, vamos adicionar o plugin daisyUI – Tailwind CSS. O daisyUI adiciona nomes de classes de componentes ao Tailwind CSS para que você possa criar websites bonitos mais rapidamente.

Para adicioná-lo ao projeto, basta executar os comandos abaixo:

npm i -D daisyui@latest

E configurá-lo no arquivo tailwind.config.js:

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

Com esses passos, seu projeto Vue estará pronto para criar interfaces de usuário dinâmicas e esteticamente agradáveis de forma eficiente. A combinação do Vue com o Tailwind CSS e o daisyUI oferece uma experiência de desenvolvimento ágil e flexível, permitindo que você se concentre na criação de ótimas experiências para os usuários finais.

Referências