Home
PV Components
Usage

Usage

Pit Viper (PV) Components are a collection of reusable components built on top of the Pit Viper CSS framework.

For dev information on how to add components to the library or to run the components locally, visit the TQ Notion Doc.

Usage

The following documentation assumes you have installed the Pit Viper npm package @turquoisehealth/pit-viper. If you haven’t yet, follow the setup instructions first.

Using PV Components with Vue

PV Components are built using Vue 3 and have native Vue support. For using these components in a non-Vue environment, check out the Using PV Components without Vue section below.

All components have TypeScript support, and are built as Vue Single File Components (SFCs) with the Composition API.

When including PV Components in your Vue project, we recommend following the same structure to maintain consistency.

import { PvButton } from "@turquoishealth/pit-viper/components";

<PvButton>Example Button</PvButton>

CodePen (Vue)

Tables and Charts

Table and Chart components are available as separate packages. Refer to the component documentation to see which package a component belongs to.

import { PvDataTable } from "@turquoishealth/pit-viper/components/tables";
import { PvChart } from "@turquoishealth/pit-viper/components/charts";

Using PV Components without Vue

PV Components are built in Vue, but also support being exported as framework-agnostic Web Components. This means that you can use them in plain HTML or even another framework!

<body>
  <pv-button>Example Button</pv-button>
  <script src="path/to/@turquoisehealth/pit-viper/pv-components/dist/web/pv-components.iife.js"></script>
</body>

CodePen (Web Components)

Some notable implementation differences between native Vue components and Vue web components are:

Any Vue props that are primitive types (booleans, strings, numbers) are automatically converted to attributes.
Any complex props (objects, arrays, functions) cannot be injected into HTML directly, and require at least some JS to be used.*
Vue components can be Pascal-cased or kebab-case, whereas Vue web components are always kebab-cased (e.g. PvButton becomes <pv-button>)
Vue web components do still rely on the Vue runtime, which is a 16kb file that is bundled in the web component build automatically.

Read the Vue documentation for more information on using Vue web components.

View All Components.