Nuxt Layer AdminLTE + PrimeFace

Este projeto introduz uma camada (layer) para o Nuxt 3, desenvolvida para facilitar a integração do PrimeVue 3 e do AdminLTE 3 em aplicações web. Essa camada é projetada para ser facilmente incorporada em qualquer projeto Nuxt 3, oferecendo um template completo e funcional para a construção de interfaces de usuário ricas e painéis administrativos.

Para detalhes adicionais sobre o Nuxt 3, consulte a documentação oficial do Nuxt 3. (Leia sobre layer aqui)

Principais Características

• Esta layer utiliza o template AdminLTE 3 como base
• Integrado com PrimeVue 3 e PrimeGrid para montagem de layout e utilização de componentes

Instalação

Para iniciar um novo projeto já configurado com esta camada, siga os passos abaixo:

  npm i -g @agtm/ncli   
# Em seguida crie um novo projeto com o comando abaixo:
  ncli create-nuxt  

Este script irá:

• Instalar o Nuxt3.
• Criar um novo projeto utilizando o script padrão do Nuxt.
• Configurar o projeto com todos os requisitos e dependências necessários para rodar, incluindo Pinia, PrimeVue, entre outros.
• Configurar o diretório de fontes para src.

Notas

• Vite.server.fs.strict = true permite que o vite acesse arquivos fora do diretório src, por exemplo ao utilizar npm link. Rererência aqui

Configurando seu projeto

Para customizar seu template, habilitar funcionalidades acesse a configuração:

Consulte aqui refêrencia completa do app.config

Interface de Controle de Aplicações do Painel Administrativo

Este layer incorpora uma Interface de Controle, construída com o gerenciador de estados Pinia ou com composables, para oferecer uma gestão centralizada de estados e configurações do painel administrativo. A interface é projetada para oferecer controle programático sobre diversos aspectos da interface do usuário (UI) do painel, permitindo uma interação dinâmica e reativa com os componentes do painel.

Exemplo

Através dessa interface de controle, os desenvolvedores têm acesso a um conjunto de métodos que permitem:

• Navegação Dinâmica: Programaticamente ativar ou focar em um item de menu específico, facilitando a navegação baseada em ações do usuário ou eventos do sistema.
• Indicadores de Notificação: Definir contadores ou indicadores em itens de menu, útil para exibir a quantidade de ações pendentes, como mensagens não lidas, diretamente na UI do painel.
• Gestão de Notificações: Inserir mensagens na caixa de notificações do administrador, permitindo o envio de alertas ou informações importantes para os usuários do painel. (Funcionalidade em desenvolvimento)

Documentação e Exemplos de Uso

Para uma compreensão detalhada dos métodos disponíveis, parâmetros esperados, e exemplos de uso prático da API do painel administrativo, consulte a documentação técnica completa disponível em:

Documentação Interface de Controle

Padrão de Comunicação

Em requisições para servidores criado com node-framework, utilizamos o seguinte padrão de comunicação:

| Propriedade | Tipo | Descrição | |-------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | success | Boolean | Se a requisição concluída com sucesso | | type | String | Tipo de erro, a titulo de simplificação, durante a requisição se o erro for gerado no próprio frontend, será do tipo FRONTEND_ERROR. Outros exemplo de erro: GENERIC_ERROR, API_ERROR | | data | Object | Objeto com dados do erro ou com o resultado a requisição, cada requisição ou tipo de erro tem seu próprio layout |

Desenvolvendo seu projeto em conjunto com o template

Clique aqui para entender como trabalhar com este template em seu projeto

Layouts

Documentação completa sobre Layout

Arquivo App.vue

Este template inclui um arquivo app.vue com o seguinte conteúdo:

<template>
  <NuxtLayout/>
</template>

Este arquivo serve como um ponto de entrada para os layouts e páginas da sua aplicação. O componente <NuxtLayout /> é responsável por renderizar o layout apropriado, dependendo da configuração das metadados da página.

Uso do PrimeVue

Cada componente do PrimeVue pode ser importado individualmente, garantindo que você inclua no pacote apenas o que realmente utilizar. O caminho de importação está disponível na documentação do componente correspondente.

Por exemplo, para importar e utilizar o componente Button do PrimeVue:

import Button from "primevue/button"

const app = createApp(App);
app.component('Button', Button);

Você pode simplesmente criar um plugin para isso:

Exemplo:

src/plugins/primevue.mjs

import {defineNuxtPlugin} from '#app'

// Módulos carregados
import Card from 'primevue/card'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Card', Card)
})

Primeiros passos

Depois de tudo configurado, entre aqui para começar desenvolver sua aplicação.

Componentes

Foi desenvolvido alguns componentes baseado no AdmiLte não vinculado ao PrimeVue:

NfCard

Documentação aqui

Módulos

Autenticação e Autorização

Documentação aqui

Desenvolvimento

IMPORTANTE: Mantenha sempre documentação atualizada enquanto desenvolve, devido a complexidade do projeto

Para obter mais informações sobre como implementar e trabalhar com camadas (layers) no Nuxt, consulte a documentação oficial do Nuxt sobre a criação de layers.

Working on your theme

Your theme is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.

The playground directory should help you on trying your theme during development.

Running npm dev will prepare and boot playground directory, which imports your theme itself.

Development Server

Start the development server on http://localhost:3000

npm run dev

Checkout the deployment documentation for more information.