Tutorial: Personalizando o Quasar Framework com o Visual do Shadcn para um Blog

A combinação do poderoso Quasar Framework com a estética elegante do Shadcn UI tem ganhado popularidade entre desenvolvedores que buscam criar interfaces modernas e funcionais. Neste tutorial, vamos explorar como personalizar o Quasar Framework para ter a aparência do Shadcn, com foco em aplicações de blog.

Introdução

O Quasar Framework é conhecido por sua versatilidade e conjunto completo de componentes Vue.js, enquanto o Shadcn UI oferece um visual minimalista e moderno que tem se tornado referência em design de interfaces. Unir essas duas tecnologias permite criar aplicações com a robustez do Quasar e a estética refinada do Shadcn.

Pré-requisitos

• Conhecimento básico de Vue.js e Quasar Framework
• Node.js e npm/yarn instalados
• Familiaridade com CSS e sistema de design

Configuração Inicial

Comece clonando o repositório base que servirá como referência:

git clone https://github.com/patrickmonteiro/quasar-dashboard-shadcn.git
cd quasar-dashboard-shadcn
npm install

Este repositório, criado por Patrick Monteiro, já contém uma implementação de dashboard usando Quasar com visual inspirado no Shadcn.

Principais Características

1. Sistema de Cores

O Shadcn utiliza um esquema de cores neutras com acentos sutis. Para replicar isso no Quasar:

• Configure variáveis CSS personalizadas no arquivo src/css/quasar.variables.scss
• Implemente o modo escuro/claro com transições suaves

2. Componentes Personalizados

Para obter o visual do Shadcn, você precisará personalizar vários componentes do Quasar:

Botões

Os botões do Shadcn possuem cantos ligeiramente arredondados e efeitos de hover sutis:

.q-btn {
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.q-btn--flat:hover {
  background-color: rgba(var(--q-primary), 0.08);
}

Cards

As cards do Shadcn têm bordas suaves e sombras mínimas:

.q-card {
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

Formulários

Para campos de formulário com aparência Shadcn:

.q-field__control {
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  height: 2.5rem;
}

.q-field--focused .q-field__control {
  border-color: var(--q-primary);
}

Layout do Blog

Para adaptar este design a um blog, considere:

Estrutura de Página

<template>
  <q-layout view="lHh Lpr lFf">
    <!-- Header com estilo Shadcn -->
    <q-header elevated class="bg-white text-dark">
      <q-toolbar>
        <q-toolbar-title>
          Seu Blog
        </q-toolbar-title>
        <q-btn flat round dense icon="dark_mode" @click="toggleDarkMode" />
      </q-toolbar>
    </q-header>

    <!-- Área principal do conteúdo -->
    <q-page-container>
      <q-page class="q-pa-md">
        <!-- Lista de Posts -->
        <div class="row q-col-gutter-md">
          <div class="col-12 col-md-6 col-lg-4" v-for="post in posts" :key="post.id">
            <q-card class="blog-card">
              <q-img :src="post.cover" />
              <q-card-section>
                <div class="text-h6">{{ post.title }}</div>
                <div class="text-subtitle2">{{ post.date }}</div>
              </q-card-section>
              <q-card-section>
                {{ post.excerpt }}
              </q-card-section>
              <q-card-actions>
                <q-btn flat color="primary">Ler mais</q-btn>
              </q-card-actions>
            </q-card>
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

Estilização dos Posts

Para cards de posts com aparência Shadcn:

.blog-card {
  transition: transform 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card .q-img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

Implementando o Modo Escuro

O Shadcn é conhecido pelo excelente suporte ao modo escuro. Para implementar:

import { Dark } from 'quasar'

// No seu componente
methods: {
  toggleDarkMode() {
    Dark.toggle()
    document.body.classList.toggle('dark-mode')
  }
}

Com CSS correspondente:

body.dark-mode {
  --q-primary: #6b7280;
  --q-secondary: #5eead4;
  --text-color: #f3f4f6;
  --bg-color: #111827;
  --border-color: #374151;
}

.body--dark .q-card {
  background: #1f2937;
}

Otimizações para Performance

Para garantir que seu blog com visual Shadcn tenha boa performance:

1. Use a função q-img do Quasar para carregamento otimizado de imagens
2. Implemente lazy-loading para posts ao rolar a página
3. Utilize componentes assíncronos para carregar seções do blog sob demanda

Conclusão

A combinação do Quasar Framework com a estética do Shadcn proporciona uma base excelente para blogs modernos. O dashboard desenvolvido por Patrick Monteiro serve como ponto de partida ideal, permitindo adaptar os componentes para necessidades específicas de um blog.

Explore a demo online para ver o resultado em ação e consulte o repositório no GitHub para detalhes de implementação. O tutorial em vídeo também oferece insights valiosos sobre o processo de personalização.

Com essas técnicas, você pode criar um blog visualmente impressionante, mantendo todas as funcionalidades robustas que o Quasar Framework oferece.