Skip to content

Example of how to create and publish a npm package (vue.js multiselect component)

Notifications You must be signed in to change notification settings

horchatajs/hjs-multiselect

Repository files navigation

hjs-multiselect

It's a multiselect vue.js component. Demo

Example

Warning!

This is an example of how to create and publish a npm package and it was created for learning purposes and as an example for horchata js conference, DON'T USE IT ON PRODUCTION

If you want to read the gitbook about, "How to create a Node js package", go here (it's in spanish)

Install

npm:

  npm install @horchatajs/hjs-multiselect --save

yarn:

  yarn add @horchatajs/hjs-multiselect

Usage

HTML

<div id="app">
  <p><label for="">Países</label></p>
  <hjs-multiselect placeholder="Please select countries" v-bind:items="items" v-bind:select="select"  @change="onChange"></hjs-multiselect>
</div>
<div id="preview"></div>

Javascript

Vue.use(HjsMultiselect); // Register the global UI component

new Vue({
  el: '#app',
  data: {

    select: [{ text: 'El Salvador', value: 'SV' }],
    items: [
      {text: "El Salvador", value: "SV"},
      {text: "Guatemala", value: "GT"},
      {text: "Honduras", value: "HN"}
    ]
  },
  methods: {
    onChange: function(item, items){
      let preview = document.getElementById('preview');
      preview.innerHTML = "<p>On change event, preview of selected items: "+JSON.stringify(items)+ "</p>"
    }
  }
})

Contributors

About

Example of how to create and publish a npm package (vue.js multiselect component)

Resources

Stars

Watchers

Forks

Packages

No packages published