1.6.7 • Published 4 months ago

vue-nutrition-label v1.6.7

Weekly downloads
3
License
MIT
Repository
github
Last release
4 months ago

vue-nutrition-label

A VueJS component to create a 2018 FDA-style nutrition label

View Demo

Installation

via npm

npm install vue-nutrition-label --save

via CDN

<script src="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.css" rel="stylesheet" type="text/css">

Usage

via npm

<!-- Vue component -->
<template>
  <div>
    <nutrition-label :options="options" v-model="item"></nutrition-label>
  </div>
</template>

<script>
  import NutritionLabel from 'vue-nutrition-label';

  // register globally
  Vue.component('nutrition-label', NutritionLabel);

  export default {
    // or register locally
    components: {
      NutritionLabel
    },
    data () {
      return {
        options: {},
        item: {}
      };
    }
  }
</script>

<style>
  your styles
</style>

via CDN

<html>
  <head>
    <title>...</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="app">
      <nutrition-label :options="options" v-model="item"></nutrition-label>
    </div>
   <script>
      var vm = new Vue({
        el: '#app',
        components: {
          'nutrition-label': window.VueNutritionLabel.NutritionLabel
        },
        data() {
          return {
            options: {},
            item: {}
       });
    </script>
  </body>
</html>

:options

The options prop must be an Object.

const options = {
  width: 280,
  useFdaRounding: 1, // use FDA rounding rules
  readOnly: false,  // show/hide serving input field
  multipleItems: false,
  addedSugars: {
    show: 1,
    na: 1
  },
  calcium: {
    show: 1,
    na: 1
  },
  calories: {
    show: 1,
    na: 1
  },
  cholesterol: {
    show: 1,
    na: 1
  },
  fatCalories: {
    show: 1,
    na: 1
  },
  fiber: {
    show: 1,
    na: 1
  },
  iron: {
    show: 1,
    na: 1
  },
  monounsaturatedFat: {
    show: 0,
    na: 1
  },
  polyunsaturatedFat: {
    show: 0,
    na: 1
  },
  potassium: {
    show: 1,
    na: 1
  },
  protein: {
    show: 1,
    na: 1
  },
  saturatedFat: {
    show: 1,
    na: 1
  },
  sodium: {
    show: 1,
    na: 1
  },
  sugarAlcohol: {
    show: 0,
    na: 1
  },
  sugars: {
    show: 1,
    na: 1
  },
  totalCarb: {
    show: 1,
    na: 1
  },
  totalFat: {
    show: 1,
    na: 1
  },
  transFat: {
    show: 1,
    na: 1
  },
  vitaminA: {
    show: 1,
    na: 1
  },
  vitaminC: {
    show: 1,
    na: 1
  },
  vitaminD: {
    show: 1,
    na: 1
  }
}

Item Object

const item = {
  name: 'Double Cheese Burger',
  serving: 1,
  servingPerContainer: 0,
  servingUnitName: 'serving',
  ingredientStatement: 'Swiss cheese, American cheese, more cheese and a burger.',
  nutrition: {
    calories: 510,
    fatCalories: 170,
    totalFat: 19,
    saturatedFat: 9,
    transFat: 0,
    polyunsaturatedFat: 0,
    monounsaturatedFat: 0,
    cholesterol: 10,
    sodium: 560,
    totalCarb: 79,
    fiber: 4,
    sugars: 35,
    protein: 9,
    vitaminA: 1,
    vitaminC: 2,
    calcium: 35,
    iron: 1,
    addedSugars: 0,
    potassium: 100,
    vitaminD: 0,
    servingWeight: 175
  }
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run bundle

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

nutrition
vue
@infinitebrahmanuniverse/nolb-vue-n@everything-registry/sub-chunk-3087
1.6.7

4 months ago

1.6.6

5 months ago

1.6.5

5 months ago

1.6.4

7 months ago

1.6.3

8 months ago

1.6.2

8 months ago

1.6.1

8 months ago

1.6.0

8 months ago

1.5.9

8 months ago

1.5.8

8 months ago

1.5.5

1 year ago

1.5.4

1 year ago

1.5.7

1 year ago

1.5.6

1 year ago

1.5.3

2 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.3

4 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.9

5 years ago

1.2.8

5 years ago

1.2.7

5 years ago

1.2.6

5 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago