PrimeVue Overrides

This package provides custom design overrides for PrimeVue components, allowing you to implement your own styled elements including buttons, dialogs, inputs, and more.

Installation

First, install the dependencies:

npm install

Development

To start the development server:

npm run dev

Publishing as a Private npm Package

To publish this package as a private npm package, follow these steps:

1. Update the package name in package.json with your organization's scope:

{
  "name": "@your-organization/primevue-overrides"
}

2. Login to npm with your account that has access to your organization:

npm login

3. Build the package:

npm run build

4. Publish the package:

npm publish

Since the package is marked as private ("private": true), you'll need an npm paid account or organization to publish it.

Using in Other Projects

After publishing, you can use this package in your other projects instead of PrimeVue:

Install the package

npm install @your-organization/primevue-overrides

Method 1: Use as a Vue Plugin (Recommended)

// main.js
import { createApp } from 'vue';
import App from './App.vue';

// Import your custom PrimeVue package
import PrimeVueOverrides from '@your-organization/primevue-overrides';

// Import PrimeIcons if needed
import 'primeicons/primeicons.css';

const app = createApp(App);

// Use your custom package (this will register all components globally)
app.use(PrimeVueOverrides, {
  // Optional PrimeVue configuration
  ripple: true,
  inputStyle: 'filled'
});

app.mount('#app');

Method 2: Import Individual Components

<template>
  <div>
    <Button label="Custom Button" />
    <InputText v-model="text" placeholder="Custom Input" />
  </div>
</template>

<script>
import { Button, InputText } from '@your-organization/primevue-overrides';

export default {
  components: {
    Button,
    InputText
  },
  data() {
    return {
      text: ''
    };
  }
};
</script>

Method 3: Import Only the Styles

If you want to use the standard PrimeVue components but with your custom styling:

// Import just the styles from your package
import '@your-organization/primevue-overrides/src/assets/styles/theme.scss';

// Then use regular PrimeVue components
import { Button } from 'primevue/button';

Customization

You can customize the design by modifying the variables in:

src/assets/styles/variables.scss

This file contains all the design tokens used throughout the components, including:

• Color palette
• Typography
• Border radius
• Spacing
• Shadows
• Transitions

Component Overrides

The following components have been customized:

• Buttons (primary, secondary, success, info, warning, help, danger)
• Input fields (text inputs, password inputs)
• Dialogs
• Dropdowns
• Checkboxes
• Radio buttons
• And more

Building for Production

To build the library for production:

npm run build

License

ISC