BSDS Components for Vue 2

Installation

npm install --save @wwtdev/bsds-components-vue2

Using the Components

Add the following to your main.js file to import and use the component library:

import { ComponentLibrary } from '@wwtdev/bsds-components-vue2'
import '@wwtdev/bsds-components/dist/components/components.css'

Vue.use(ComponentLibrary)

/* ... set up options, other plugins ... */

new Vue(options).$mount('#app')

Now you can use BSDS Components in your code, just like standard Vue components:

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

export default {
    components: {
        BsButton,
    }
}
</script>

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

Caveats

Currently v-model is not supported in this Vue 2 package. To handle events and form input-binding, you will need to handle the native event as shown in the example below:

<BsCheckbox
  :checked="checkVal"
  label="Checkbox"
  @change="e => checkVal = e.target.checked"
></BsCheckbox>

<BsInputField
  label="Input field"
  :value="inputVal"
  @input="e => inputVal = e.target.value"
></BsInputField>

<BsSelectField
  :data="optionsArr"
  label="Select field"
  :value="selectVal"
  @change="e => inputVal = e.target.value"
></BsSelectField>

<BsSwitch
  :checked="checkVal"
  label="Switch"
  @change="e => checkVal = e.target.checked"
></BsSwitch>

<BsTextareaField
  label="Textarea field"
  :value="textareaVal"
  @input="e => inputVal = e.target.value"
></BsTextareaField>