@pxglobal/boreal-vue

Vue Wrapper for Boreal DS

Status: alpha. APIs may still change based on feedback. Breaking changes bump the minor version (0.15.0), so a default caret range (^0.14.0) receives fixes and features without breaking changes. Previously published as @telesign/boreal-vue (up to 0.1.0-alpha.11); those packages are deprecated.

A lightweight utility that wraps Boreal DS web components for seamless integration in Vue 3 applications.

Overview

Using Boreal DS Vue wrappers over plain web components provides several advantages:

• Type checking — full TypeScript support with typed props and events
• v-model support — form control components work with Vue's two-way binding
• Router integration — compatible with Vue Router's <router-link>

Installation

[!TIP] Refer to the official Boreal DS documentation at Boreal DS Storybook for more details.

npm install @pxglobal/boreal-vue

[!NOTE] @pxglobal/boreal-web-components is a dependency of this package and will be installed automatically. You do not need to install it separately.

Setup

Styles

Import the Boreal DS stylesheet in your application entry file:

// main.ts
import "@pxglobal/boreal-vue/css/boreal.css";

Icon font

Add the Boreal DS icon font to the <head> of your index.html:

<link
  rel="stylesheet"
  href="https://resources-borealds.s3.us-east-1.amazonaws.com/icons/current/boreal-styles.css"
/>

Theming

Set the data-theme attribute on the <body> element to activate a brand theme:

<body data-theme="proximus"></body>

Available values: connect | engage | protect | proximus

Usage

<script setup lang="ts">
import { BdsBanner } from "@pxglobal/boreal-vue";

const handleClose = () => {
  console.log("Banner closed");
};
</script>

<template>
  <BdsBanner variant="info" closable @bds-close="handleClose">
    Welcome to Boreal DS
  </BdsBanner>
</template>