repository·main·Indexed 43 days ago
https://github.com/who-jonson/sakai-nuxtAn admin template for Nuxt 3 featuring a pre-configured layout, menu system, and integration with PrimeVue. It includes a PrimeVue Nuxt module for granular component registration, a theme-switching composable via useAppTheme(), and a dashboard implementation using PrimeFlex, PrimeIcons, and PrimeVue components like DataTable and Chart.
The project is organized into two primary areas:
src/app.vue, which serves as the main component containing the base layout logic (menu state, layout modes, etc.).src/assets/ folder (e.g., SASS structures).The main layout in app.vue is composed of child components including topbar, menu, and footer.
The menu is a separate component defined in AppMenu.vue and follows the PrimeVue MenuModel API.
To customize the menu items, navigate to the data section of the app.vue file and define your own nested structure using the menu property.
To set up the Sakai Admin Template locally, clone the repository and install dependencies using your preferred package manager. After installation, start the development server to view the application at http://localhost:3000/.
pnpm install
# or
npm install
# or
yarn installpnpm dev
# or
npm run dev
# or
yarn devpnpm install
pnpm devSakai is compatible with any PrimeVue theme (such as Material, Tailwind, or Bootstrap) because layout colors are derived from the theme via CSS variables. By default, it uses the free Saga, Arya, and Vela themes.
To customize specific layout variables, modify the _variables.scss file located in src/layout/.
Available variables in src/assets/_variables.scss:
$fontSize: 1rem;
$borderRadius: 12px;
$transitionDuration: .2s;
$maskBg: rgba(0, 0, 0, 0.4);The module provides granular control over which PrimeVue components are registered in your Nuxt application. By default, it attempts to register a large set of standard PrimeVue components.
components.include array. You can pass a simple string name or an object to control the global status of that specific component.components.exclude array to remove components from the default set.ConfirmDialog, ConfirmPopup, Toast, and Tooltip are automatically treated as global by the module logic.Common components include: Accordion, AutoComplete, Avatar, Button, Calendar, Card, Checkbox, DataTable, Dialog, Dropdown, InputText, Menu, ProgressBar, Sidebar, SelectButton, Slider, SplitButton, Toast, and many others.
The dashboard page demonstrates how to compose various PrimeVue components within a Nuxt 3 application using PrimeFlex for layout. Key components used include:
:paginator="true"), sorting (:sortable="true"), and custom body templates for images and formatted currency.type="line") using a lineData object containing labels and datasets.:popup="true" prop, triggered by a button using $refs.menuName.toggle($event).icon="pi pi-search").Menu that may rely on browser-specific APIs to prevent SSR (Server-Side Rendering) mismatches.Layout is managed using a grid system (e.g., class="grid", class="col-12 lg:col-6") provided by PrimeFlex.
<template>
<div class="grid">
<!-- Stat Cards -->
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
<!-- Card Content -->
</div>
</div>
<!-- Data Table -->
<div class="col-12 xl:col-6">
<div class="card">
<DataTable :value="products" :rows="5" :paginator="true" responsive-layout="scroll">
<Column field="name" header="Name" :sortable="true" />
</DataTable>
</div>
</div>
<!-- Chart -->
<div class="col-12 xl:col-6">
<div class="card">
<Chart type="line" :data="lineData" />
</div>
</div>
</div>
</template>The primevue module allows you to configure PrimeVue within a Nuxt 3 application. You can control component registration (including/excluding specific components), global settings, ripple effects, and input styles via the primevue configuration key in your nuxt.config.ts.
| Option | Type | Default | Description |
|---|---|---|---|
components.global | boolean | true | Whether to register components globally. |
components.include | Array<PrimevueComponents | { name: PrimevueComponents, global?: boolean }> | undefined | A list of specific components to include. If provided, only these components will be registered. |
components.exclude | Array<PrimevueComponents> | undefined | A list of components to exclude from the default registration list. |
ripple | boolean | true | Enables or disables the PrimeVue ripple effect. |
inputStyle | 'outlined' | 'filled' | 'outlined' | Sets the default input style. |
export interface PrimeVueOptions extends PrimeVueConfig {
components?:
exclude?: Array<PrimevueComponents>,
include?: Array<PrimevueComponents | { name: PrimevueComponents, global?: boolean }>,
global?: boolean
;
}The app.config.ts file is used to define global application metadata and routing settings for the Sakai Nuxt template. You can customize the page title, description, and the base URL for the application.
export default defineAppConfig({
title: 'Sakai Nuxt',
description: '',
baseURL: '/'
});Sakai provides standard Nuxt/Nuxi scripts for managing the application lifecycle:
| Command | Description |
|---|---|
pnpm run dev | Starts the development server |
pnpm run build | Builds the application for deployment |
pnpm run generate | Builds the application for static deployment |
pnpm run start | Runs the production server |
Note: Replace pnpm run with npm run or yarn as needed.
Ensure the following dependencies are present in your package.json to support the template's functionality:
{
"primeflex": "3.2.1",
"primeicons": "6.0.1",
"primevue": "3.17.0"
}The ProductService class is used to interact with product-related data. In the dashboard implementation, it is instantiated and its getProductsSmall() method is called within the onMounted lifecycle hook to populate the products reactive state.
To use it, instantiate the service and call its data fetching methods, which return Promises that resolve to the requested data.
import ProductService from '~~/services/ProductService';
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => {
products.value = data;
});
});The module automatically adds the usePrimeVue import to your Nuxt application, allowing you to access the PrimeVue configuration instance within your composables or components.
import { usePrimeVue } from 'primevue/config';
// Inside a setup function or component
const primevue = usePrimeVue();