# @prismaui/vue

> > TODO: description

Latest version **0.1.0-0.1.0-y.1x2.0** (published 2023-06-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install @prismaui/vue
pnpm add @prismaui/vue
yarn add @prismaui/vue
bun add @prismaui/vue
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0-0.1.0-y.1x2.0 |
| Published | 2023-06-17 |
| First published | 2023-05-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mehrabix |
| Maintainers | mehrabi |

## Links

- npm: https://www.npmjs.com/package/@prismaui/vue
- Repository: https://github.com/prismaui/prismaui
- Homepage: https://github.com/prismaui/prismaui#readme
- Issues: https://github.com/prismaui/prismaui/issues
- npm.io page: https://npm.io/package/@prismaui/vue

## Dependencies (1)

- [@prismaui/core](https://npm.io/package/@prismaui/core.md) *

## Recent versions

- 0.1.0-0.1.0-y.1x2.0 (latest) — 2023-06-17
- 0.1.0-y.0 — 2023-06-16
- 0.0.1-y.10.4 — 2023-06-08
- 0.0.1-y.10.0 — 2023-06-03
- 0.0.1-y.9.0 — 2023-06-03
- 0.0.1-y-8.0 — 2023-06-03
- 0.0.1-y-7.0 — 2023-06-03
- 0.0.1-y.5.0 — 2023-06-03
- 0.0.1-y.4 — 2023-06-03
- 0.0.1-y.3 — 2023-06-03
- 0.0.1-y.2 — 2023-06-02
- 0.0.1-y.1 — 2023-06-02
- 0.0.1-y.0 — 2023-06-01
- 0.0.1-alpha.14.0.0 — 2023-05-30
- 0.0.1-alpha.13 — 2023-05-30
- … 13 more at https://npm.io/package/@prismaui/vue/versions

## README

## Installation

```shell
npm i @prismaui/vue
```

## Configuration

Update your generated `vite.config.ts` file as follows:

```diff
export default defineConfig({
  plugins: [
-    vue(),
-    vueJsx(),
+    vue({
+      template: {
+        compilerOptions: {
+          // Treat all tags with a dash as custom elements
+          isCustomElement: (tag) => tag.includes('-'),
+        },
+      },
+    }),
+    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

```

Update your `main.ts` and add Prisma UI Components in the `use()` wrapper:

```diff
import './assets/main.css'
import { PrmButton } from '@prismaui/vue';

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

createApp(App).use(PrmButton).mount('#app')

```

## Custom CSS Variables

Update your `base.css` file to include the following CSS variables:

```css
:root {
  /* Primary Colors */
  --primary: #1E3A8A;
  --primary-light: #4A5A99;
  --primary-dark: #0F2658;

  /* Secondary Colors */
  --secondary: #9F38B4;
  --secondary-light: #D275DF;
  --secondary-dark: #6D0E82;

  /* Success Colors */
  --success: #10B981;
  --success-light: #43D2A9;
  --success-dark: #0E7D58;

  /* Warning Colors */
  --warning: #F59E0B;
  --warning-light: #FFC94D;
  --warning-dark: #D9820E;

  /* Danger Colors */
  --danger: #EF4444;
  --danger-light: #F48080;
  --danger-dark: #BE2E2E;

  /* Info Colors */
  --info: #3B82F6;
  --info-light: #6696F6;
  --info-dark: #1D4ED8;

  /* Neutral Colors */
  --lightest: #F3F4F6;
  --lighter: #FFFFFF;
  --light: #D1D5DB;
  --dark: #1F2937;
  --darker: #6B7280;
  --darkest: #111827;
}
```

## Usage

In your Vue pages, you can now use the components from `@prismaui/vue`. 

```vue
<script setup lang="ts">
import { PrmButton } from '@prismaui/vue';
</script>

<template>
  <PrmButton variant="info">test</PrmButton>
</template>
```

Make sure to import the required components and use them accordingly in your Vue files.

---
_Source: https://npm.io/package/@prismaui/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._