vue dash

VueDash (modelo de painel de administração CSS Vue Nuxt.js 3 Tailwind)

Um modelo de painel de administração moderno, responsivo e personalizável criado com Vue.js , Nuxt.js 3 , NuxtUI e Tailwind CSS . Este modelo é perfeito para criar interfaces administrativas, painéis e aplicativos da web poderosos com um design limpo e minimalista.

Características

• Nuxt.js 3 : renderização contínua do lado do servidor (SSR) e geração de site estático (SSG) com API de composição Vue 3.
• Tailwind CSS : estrutura CSS utilitária para desenvolvimento de UI rápido e responsivo.
• Gerenciamento de listas de tarefas : suporte integrado para gerenciamento de listas de tarefas CRUD
• Invoice Maker : suporte integrado para CRUD, criador de faturas interativo
• Componentes reutilizáveis : Componentes de UI modulares e reutilizáveis ​​para fácil personalização.
• Modo escuro : suporte integrado para temas claros e escuros.
• Design responsivo : Totalmente otimizado para todos os tamanhos de tela.
• Roteamento dinâmico : sistema de roteamento flexível desenvolvido por Nuxt.js.
• Extensível : Fácil de adicionar novas páginas, componentes e plugins.

? Pilha de tecnologia

• Framework Frontend : Vue.js 3 (API de composição)
• Meta Framework : Nuxt.js 3
• Estilo : Tailwind CSS
• Biblioteca de componentes de UI : NextUI
• Gerenciador de pacotes : pnpm

Instalação

1. Clone o repositório :

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

2. Instale dependências :

   pnpm install
   # or
   npm install

3. Execute o servidor de desenvolvimento :

   pnpm run dev
   # or
   npm run dev

4. Abra seu navegador e navegue até http://localhost:3000 .

---

Estrutura de arquivo

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

? Documentação de rotas e páginas

Rota	Nome da página	Descrição
/	Página principal	A página inicial principal do painel de administração.
/login	Página de login	Permite que os usuários façam login para acessar o painel de administração.
/register	Página de registro	Permite que novos usuários criem uma conta.
/contact	Página de contato	Exibe um formulário para os usuários entrarem em contato para obter suporte ou dúvidas.
/invoice	Página da fatura	Exibe uma lista de faturas ou detalhes de registros financeiros.
/todo	Página de tarefas do aplicativo	Uma página para gerenciar e rastrear tarefas em formato de lista de tarefas.
/products	Página de produtos	Uma página para gerenciar informações do produto, incluindo detalhes e preços.
/order-lists	Página de listas de pedidos	Lista todos os pedidos de clientes com opções para visualizá-los e gerenciá-los.
/product-stock	Página de estoque de produtos	Exibe os níveis de estoque atuais e opções de gerenciamento de estoque.
/settings	Página de configurações	Permite que os usuários gerenciem as configurações do sistema e preferências pessoais.
/team	Página da equipe	Apresenta membros da equipe, funções e opções de gerenciamento de permissões.

? Personalização

CSS do vento favorável

Modifique o arquivo tailwind.config.js para personalizar temas, estender estilos ou adicionar plug-ins.

Componentes

Todos os componentes estão no diretório components/ dentro do diretório features/(domain)/ . Crie novos componentes ou amplie os existentes para atender às necessidades do seu projeto.

Páginas e roteamento

Adicione ou edite arquivos no diretório pages/ para criar novas rotas dinamicamente.

? Dependências

• Vista 3
• Nuxt.js3
• CSS do vento favorável
• NuxtUI

Documentação

Configurando autenticação

Você pode integrar qualquer serviço de autenticação (por exemplo, Firebase, Auth0 ou JWT personalizado) usando middleware e plug-ins do Nuxt. Consulte o módulo de autenticação Nuxt.js para obter mais detalhes.

Adicionando integrações de API

Use rotas de servidor do Nuxt ou chamadas de API externas nos diretórios pages/ ou composables/ . Saiba mais sobre o tratamento da API Nuxt.js aqui.

? Teste

Teste de Unidade

Instale e configure o Vitest para testar a unidade de seus componentes Vue.

Teste ponta a ponta

Use Cypress ou Playwright para testes ponta a ponta.

Implantação

1. Geração de site estático (SSG) :

   pnpm run generate

   Implante os arquivos gerados da pasta dist/ em um provedor de hospedagem estática (por exemplo, Netlify, Vercel).

2. Renderização do lado do servidor (SSR) :

   pnpm run build
   pnpm run start

   Implante o aplicativo na hospedagem Node.js (por exemplo, AWS, Heroku ou DigitalOcean).

? Apoiar

Se você encontrar algum problema, tiver dúvidas ou quiser solicitar novos recursos ou páginas, sinta-se à vontade para abrir um problema ou entrar em contato com [email protected].

? Contribuições

Contribuições são bem-vindas! Siga estas etapas:

1. Bifurque o repositório.
2. Crie uma ramificação de recursos ( git checkout -b feature-name ).
3. Confirme suas alterações ( git commit -m "Add feature" ).
4. Envie para a ramificação ( git push origin feature-name ).
5. Abra uma solicitação pull.

Licença

Este projeto está licenciado sob a licença MIT.

? Agradecimentos

• Vue.js
• Nuxt.js
• NuxtUI
• CSS do vento favorável

Visualização da página

Visualização da área de trabalho

Visualização do tablet

Visualização móvel