Vue oxford

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

Version: 1.1.1 Updated: 02/25/2021

By: ospencer License: MIT

Downloads Last 30 Days: 158

Install

npm i vue-oxford
yarn add vue-oxford

Repository: https://github.com/ospencer/vue-oxford

CDNs

bundle.run: https://bundle.run/vue-oxford

jsDelivr: https://cdn.jsdelivr.net/npm/vue-oxford

unpkg: https://unpkg.com/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'])
Categories: Vue js
Tags: