BSDS Components for Nuxt 3

This module installs our Vue 3-compatible package, plus:

• a nuxt/vue plugin for registering our customs,
• a nitro plugin to make our custom elements play nice with SSR, and
• the CSS framework styles

Installation

npm install --save @wwtdev/bsds-nuxt

Using the components in your Nuxt App

You'll need to add this module to your nuxt.config.ts configuration file:

/nuxt.config.ts

export default defineNuxtConfig({
  ...
  modules: [
    '@wwtdev/bsds-nuxt'
  ],
  build: {
    transpile: [
      '@wwtdev/bsds-components',
      '@wwtdev/bsds-components-vue3',
      '@wwtdev/bsds-icons'
    ]
  }
  ...
})

Now you can use BSDS Components in your code, just like standard Vue components. Note that you'll need to import from our vue 3 package, which should be installed automatically.

<script setup>
import { BsButton } from '@wwtdev/bsds-components-vue3'
</script>

<template>
  <div>
    <BsButton>Hello World!</BsButton>
  </div>
</template>

Slotted components

Due to SSR-related issues, the components listed below are "pure" Vue components. Each of these components implements the same styles and logic as their Stencil custom element counterparts, with the caveat that each renders a root element <bs-host data-component="bs-component-name"> instead of <bs-component-name>. These components are:

• BsAccordion
• BsBanner
• BsButton
• BsIconGradientWrapper
• BsLabel
• BsPill
• BsSelect
• BsTooltip