vue-oxford

vue-oxford

A Vue component that renders components in a comma-separated list, with an Oxford comma.

Installation

Via yarn:

yarn add vue-oxford

Via npm:

npm install vue-oxford --save

In your main.js or wherever your Vue instance is initialized:

import Vue from 'vue'
import VueOxford from 'vue-oxford'

Vue.component('vue-oxford', VueOxford)

Or add it locally to a component:

<script>
import VueOxford from 'vue-oxford'

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

Usage

With a list of some sort (here a list of colors containing ['red', 'blue', 'green', 'pink']):

<p>
  My favorite colors are
  <vue-oxford>
    <span v-for="color in list">{{ color }}</span>
  </vue-oxford>
  .
</p>

renders as:

My favorite colors are red, blue, green, and pink.

It can also be used as a standalone function:

import { join } from 'vue-oxford'

join(['red', 'blue', 'green', 'pink'])

With an optional conjunction parameter:

import { join } from 'vue-oxford'

join(['red', 'blue', 'green', 'pink'], 'or')