uiux

This template should help get you started developing with Vue 3 in Vite.

Installation (as a package)

Install the package in your Vue 3 project:

npm install pgo-uiux2

Usage

1. Import the library and styles in your main.js/main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import 'pgo-uiux2/style.css' // Import the UI library styles
import { ComponentRenderer, ListView } from 'pgo-uiux2' // Import components you need

const app = createApp(App)
// Register components globally if desired
app.component('ComponentRenderer', ComponentRenderer)
app.component('ListView', ListView)
app.mount('#app')

2. Add routes in your router:

import { ComponentRenderer, ListView } from 'pgo-uiux2'

const routes = [
  { path: '/custom-renderer', component: ComponentRenderer },
  { path: '/list-view', component: ListView }
  // ...other routes
]

3. Tailwind CSS Setup

Make sure your tailwind.config.js includes the package for class scanning:

content: [
  './index.html',
  './src/**/*.{vue,js,ts,jsx,tsx}',
  './node_modules/pgo-uiux2/**/*.{js,ts,vue}'
]

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

New components

NavDrawerItem — A small wrapper to create consistent navigation items inside NavDrawer. Use it like:

<NavDrawerItem href="#/">
  <HeroIcon name="home" /> Dashboard
</NavDrawerItem>

Compile and Minify for Production

npm run build