@frontiers/prime-preset
v1.1.0
Published
Frontiers custom preset for primetek component libraries, based on the Lara preset
Downloads
845
Readme
Frontiers Prime Preset
A custom preset for primevue or primeng components based on the Lara theme, designed specifically for the Frontiers project.
🚀 Installation
npm install @frontiers/prime-preset
# or
pnpm install @frontiers/prime-preset
# or
yarn add @frontiers/prime-preset📖 Usage
With PrimeVue Configuration
import { createApp } from "vue"
import PrimeVue from "primevue/config"
import FrontiersPreset from "@frontiers/prime-preset"
const app = createApp(App)
app.use(PrimeVue, {
theme: {
preset: FrontiersPreset,
},
})With Nuxt.js
// Create a new file for preset module (for example: frontiers-prime-preset.ts)
import FrontiersPreset from "@frontiers/prime-preset";
export default {
preset: FrontiersPreset,
options: {
cssLayer: {
name: "primevue",
order: "theme, base, primevue"
}
}
};// nuxt.config.js
export default defineNuxtConfig({
modules: ["@primevue/nuxt-module"],
primevue: {
autoImport: true,
// Import the preset module from the file you created
importTheme: { from: "~/frontiers-prime-preset" }
},
})🎨 What's Included
This preset extends the Lara theme with custom styling for all PrimeVue components:
- Form Components: Input, Select, Checkbox, Radio, etc.
- Button Components: Button, SplitButton, SpeedDial
- Data Components: DataTable, TreeTable, Timeline
- Panel Components: Card, Dialog, Fieldset
- Navigation: Menu, MenuBar, Breadcrumb
- And many more...
🛠️ Development
Building the Package
# Build the package
pnpm build
# Watch for changes during development
pnpm dev
# Clean build artifacts
pnpm cleanProject Structure
packages/preset/
├── src/
│ ├── components/ # Component-specific theme overrides
│ │ ├── button.ts # Button component theme
│ │ ├── card.ts # Card component theme
│ │ └── ... # Other component themes
│ └── index.ts # Main preset export
├── dist/ # Built output (generated)
├── package.json
├── tsconfig.json
└── README.md📋 Requirements
Peer Dependencies
@primeuix/themes>= 1.0.0
Development Dependencies
typescript^5.0.0rimraf^5.0.0
📝 License
ISC License
🤝 Contributing
This preset is part of the Frontiers primeuix project. See the main repository for contribution guidelines.
Built for PrimeVue • Customized for Frontiers
