VueJS + Tailwind + DaisyUI = ūüėéūüĆ∑

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
Enter fullscreen mode
Exit fullscreen mode
‚úĒ 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.
Enter fullscreen mode
Exit fullscreen mode
cd <your-project-name>
npm install
npm run dev
Enter fullscreen mode
Exit fullscreen mode

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
Enter fullscreen mode
Exit fullscreen mode

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

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

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;
Enter fullscreen mode
Exit fullscreen mode

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
Enter fullscreen mode
Exit fullscreen mode

E configur√°-lo no arquivo tailwind.config.js:

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

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


Discover more from Coursity

Subscribe to get the latest posts to your email.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *