@vonagevolta/vue

Vue.js components for Vonage Volta

Usage no npm install needed!

<script type="module">
  import vonagevoltaVue from 'https://cdn.skypack.dev/@vonagevolta/vue';
</script>

README

volta-vue

Coverage lines Coverage functions Coverage branches Coverage statements

Vue.js single file components for Vonage Volta authored with vue-loader

Contributing

Steps

  1. Create a branch from the develop branch
  2. Make your changes and commit to your branch
  3. Create a pull request to merge your branch to develop

Guidelines

  • Create one branch per feature/fix
  • Branches should be deleted after being merged in to develop

Getting Started with NPM

npm install @vonagevolta/vue

Fonts

Set the font variable value before loading the volta style sheet

$Vlt-font-url: '~@vonagevolta/core/fonts/';
@import '~@vonagevolta/core/scss/volta';

Icons

Icons have a dependency on svg-sprite-loader

npm install svg-sprite-loader --save-dev

Webpack config

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  options: {
    symbolId: 'V'
  }
}

App.vue

import VoltaIcons from '@vonagevolta/core/dist/symbol/volta-icons.svg';
...
data () {
  return {
    VoltaIcons
  }
}

In your vue component

<template>
  <vlt-icon icon="help" />
</template>

<script>
  import { VltIcon } from '@vonagevolta/vue';

  export default {
    components: {
      VltIcon
    }
    ...
  }
</script>

Running tests

We use Vue Test Utils with Jest for unit testing. You can run all the tests:

npm test

Or a single test:

npm test test/radio/VltRadio.spec.js

Viewing the docs

Clone repo

npm run dev