PayAdvantage UI Components

Appearance

Installation ​

This guide will walk you through creating a new Vue 3 project and setting up PayAdvantage UI Components to be used in that host application.

Create a New Vue 3 Project ​

If you don't have a Vue 3 project yet, create one using Vite:

bash
npm create vite@latest my-app
# Select "Vue" when prompted for framework
# Select "JavaScript" or "TypeScript" when prompted for variant
cd my-app
npm install

Note: The Vite CLI will prompt you to choose Vue as the framework and your preferred language. For more details, see the Vite documentation.

Install PayAdvantage UI Components ​

Add the package to your project:

bash
npm install @payadvantage/ui_components

Setup ​

Add the following to your main application file (main.js or main.ts):

javascript
import { createApp } from 'vue'
import App from './App.vue'

import { createUiLib } from '@payadvantage/ui_components'
import '@payadvantage/ui_components/dist/theme-payadvantage.css'

const app = createApp(App)
app.use(createUiLib())
app.mount('#app')

AI Assistant Setup ​

Configure your AI coding assistant to understand PayAdvantage component usage patterns for optimal development experience.

Why Configure AI Assistants? ​

AI assistants can be configured to automatically recommend PayAdvantage components over standard HTML elements, ensuring consistent component usage and reducing development time.

Quick Setup ​

The Development Guidelines contain a copyable rules section specifically designed for AI assistant configuration. This helps your AI assistant:

  • Prioritize PayAdvantage components over HTML elements
  • Suggest correct component variants and props
  • Follow established naming patterns (especially for icons)
  • Recommend appropriate layout and form patterns

Setup Instructions ​

For Cursor:

  1. Visit Development Guidelines
  2. Copy the "IDE Rules" markdown code block
  3. Save it as .cursor/rules/pa-components-usage.mdc in your project root
  4. Reference: Cursor Rules documentation

For VSCode with GitHub Copilot:

  1. Visit Development Guidelines
  2. Copy the "IDE Rules" markdown code block
  3. Save it in the .github/instructions/ folder in your project root
  4. Reference: GitHub Copilot workspace instructions

For Other AI Assistants: Most AI coding assistants support similar configuration approaches. Check your AI assistant's documentation for instruction or rule file locations.

Verification ​

Test your installation with a simple component:

vue
<template>
  <div>
    <pa-button variant="primary">Hello PayAdvantage!</pa-button>
    <pa-input placeholder="Test input" />
  </div>
</template>

If the components render with PayAdvantage styling, you're ready to go!

Troubleshooting ​

Missing Styles ​

Ensure you've imported the theme CSS:

javascript
import '@payadvantage/ui_components/dist/theme-payadvantage.css'

Components Not Found ​

Verify plugin registration:

javascript
import { createUiLib } from '@payadvantage/ui_components'
app.use(createUiLib())

Component Availability ​

Components are not globally registered upon plugin registration, components must still be imported into the templates you wish to use them. Hovever, separate npm install runs for each package are not required. The library is not 'cherry-pickable' yet.

Next Steps ​