Category: JavaScript

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding wizards, changing titles and meta attributes, using Moment, and adding percentage displays.

vue-good-wizard

vue-good-wizard is a wizard plugin for Vue apps.

To use it, we install it by writing:

npm i vue-good-wizard

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueGoodWizard from "vue-good-wizard";

Vue.use(VueGoodWizard);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <vue-good-wizard :steps="steps" :onNext="nextClicked" :onBack="backClicked">
      <div slot="page1">
        <h4>Step 1</h4>
        <p>This is step 1</p>
      </div>
      <div slot="page2">
        <h4>Step 2</h4>
        <p>This is step 2</p>
      </div>
      <div slot="page3">
        <h4>Review</h4>
        <p>review</p>
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      steps: [
        {
          label: "Step 1",
          slot: "page1"
        },
        {
          label: "Step 2",
          slot: "page2"
        },
        {
          label: "Review",
          slot: "page3",
          options: {
            nextDisabled: true
          }
        }
      ]
    };
  },
  methods: {
    nextClicked(currentPage) {
      console.log("next clicked", currentPage);
      return true;
    },
    backClicked(currentPage) {
      console.log("back clicked", currentPage);
      return true;
    }
  }
};
</script>

We use the vue-good-wizard component to create the wizard.

The steps prop has an array with the slot names and labels.

The slot property of each entry has the slots.

Then we populate the slots we defined by putting whatever we want in it.

options has options we can set on each step.

It also emits events and we can set listeners for them.

vue-headful

We can use the vue-headful package to set the title and meta description of our app.

We can install it by running:

npm i vue-headful

Then we write:

<template>
  <div>
    <vue-headful title="headful title" description="headful description"/>
  </div>
</template>

to use it.

vue-headful is the component to set the metadata.

title sets the title.

description sets the meta tag’s description attribute.

We can also set other attributes of the meta tag and the link tag.

vue-simple-calendar

vue-simple-calendar is a calendar component for Vue apps.

To use it, we run:

npm i vue-simple-calendar

to install the package.

Then we write:

<template>
  <div id="app">
    <calendar-view :show-date="showDate">
      <calendar-view-header
        slot="header"
        slot-scope="t"
        :header-props="t.headerProps"
        [@input](http://twitter.com/input "Twitter profile for @input")="setShowDate"
      />
    </calendar-view>
  </div>
</template>
<script>
import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
import "vue-simple-calendar/static/css/default.css";
import "vue-simple-calendar/static/css/holidays-us.css";

export default {
  name: "app",
  data() {
    return { showDate: new Date() };
  },
  components: {
    CalendarView,
    CalendarViewHeader
  },
  methods: {
    setShowDate(d) {
      this.showDate = d;
    }
  }
};
</script>

to use it.

We’ve to import the component and CSS files.

We then use the calendar-view for adding the calendar.

And we use the calendar-view-header component to add the header.

showDate sets the default date to show.

vue-easy-pie-chart

vue-easy-pie-chart lets us display a circular percentage display to our Vue app.

We install it by running:

npm i vue-easy-pie-chart

Then we write:

<template>
  <div>
    <vue-easy-pie-chart :percent="70"></vue-easy-pie-chart>
  </div>
</template>
<script>
import VueEasyPieChart from "vue-easy-pie-chart";
import "vue-easy-pie-chart/dist/vue-easy-pie-chart.css";

export default {
  components: { VueEasyPieChart }
};
</script>

to use it.

We set the percent to display the percentage.

Also, we’ve import the CSS to make it look correct.

vue-momentjs

vue-momentjs is a Vue plugin wrapper for moment.js.

We can install it by running:

npm install moment vue-momentjs

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import moment from "moment";
import VueMomentJS from "vue-momentjs";

Vue.use(VueMomentJS, moment);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{date}}</div>
</template>
<script>
export default {
  data() {
    return {
      date: this.$moment(new Date()).format("YYYY-MM-DD")
    };
  }
};
</script>

We use the this.$moment property to call the moment function.

Then we can call any other method of the moment object with it.

Conclusion

vue-good-wizard is a wizard component for Vue.

vue-headful lets us change the title and meta description for our Vue app.

vue-momentjs is a small wrapper for moment.

vue-easy-pie-chart is a percentage display.

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding printable areas, highlight text, link previews, handling keyboard shortcuts, and tag inputs.

vue-print-nb

vue-print-nb lets us define a printable area in our Vue app.

To install it, we run:

npm i vue-print-nb

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Print from "vue-print-nb";

Vue.use(Print);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <div id="printMe">
      <p>foo</p>
      <p>bar</p>
      <p>baz</p>
    </div>

    <button v-print="'#printMe'">Print</button>
  </div>
</template>

<script>
export default {};
</script>

We use the v-print directive and pass the select of the printable element to it.

Then when we click on a button, then we’ll see a print dialog box with the preview of the printable area.

link-prevue

link-prevue provides us with a Vue component that shows us the preview of the page for the given URL.

We install it by running:

npm i link-prevue

Then we can use it by writing:

<template>
  <div id="app">
    <link-prevue url="https://example.com/"></link-prevue>
  </div>
</template>

<script>
import LinkPrevue from "link-prevue";

export default {
  components: {
    LinkPrevue
  }
};
</script>

We import the component and set the url attribute to set the attribute for the link.

It’s customizable.

For instance, we can set a custom loading indicator:

<template>
  <div id="app">
    <link-prevue url="https://example.com/">
      <template slot="loading">
        <h1>Loading...</h1>
      </template>
    </link-prevue>
  </div>
</template>

<script>
import LinkPrevue from "link-prevue";

export default {
  components: {
    LinkPrevue
  }
};
</script>

We populate the loading slot with our own content.

Then we display our loading indicator as it loads.

Other things we can customize include the card width, whether we show the button or not, and more.

v-hotkey

v-hotkey is a plugin that lets us handle keyboard shortcuts easier.

To install it, we run:

npm i v-hotkey

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueHotkey from "v-hotkey";

Vue.use(VueHotkey);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <span v-hotkey="keymap" v-show="display">Press 'ctrl + m' or hold 'enter'</span>
</template>

<script>
export default {
  data() {
    return {
      display: true
    };
  },
  methods: {
    toggle() {
      this.display = !this.display;
    },
    show() {
      this.display = true;
    },
    hide() {
      this.display = false;
    }
  },
  computed: {
    keymap() {
      return {
        "ctrl+m": this.toggle,
        enter: {
          keydown: this.hide,
          keyup: this.show
        }
      };
    }
  }
};
</script>

We have the keymap computed property that maps the key combinations to the method it calls.

Then we can use the v-hotkey directive to lets us use the key combos on the element.

vue-input-tag

vue-input-tag is a simple tags input for our Vue app.

To use it, we run:

npm i vue-input-tag

to install it.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import InputTag from "vue-input-tag";
Vue.component("input-tag", InputTag);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <input-tag v-model="tags"></input-tag>
    <p>{{tags}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: []
    };
  }
};
</script>

We use the input-tag component to add the tags input.

Then we use v-model to bind the entered tags into an array of strings.

We can set various options like whether we want to allow duplicates, placeholders, max number of tags, and more.

vue-text-highlight

vue-text-highlight lets us highlight text in our Vue components.

To use it, we run:

npm i vue-text-highlight

to install it.

Then we use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import TextHighlight from "vue-text-highlight";

Vue.component("text-highlight", TextHighlight);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <text-highlight :queries="queries">{{ description }}</text-highlight>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queries: ["jump", "fox"],
      description: "The quick brown fox jumps over the lazy dog"
    };
  }
};
</script>

We use the text-highlight component with the queries prop to indicate what we want to highlight.

The value is an array of strings.

description is the text we want to highlight.

Conclusion

vue-print-nb lets us add a printable area to our Vue app.

link-prevue is a component for adding previews to links.

v-hotkey lets us handle keyboard combos.

vue-input-tag is a tag input component.

vue-text-highlight lets us highlight text.

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding input masks, modals, manipulating dates, and autocomplete dropdowns.

Vue IMask Plugin

Vue IMask Plugin is a Vue plugin that adds an input mask into our app.

We install it by running:

npm i vue-imask

Then we write:

<template>
  <imask-input
    v-model="numberModel"
    :mask="Number"
    radix="."
    @accept="onAccept"
    placeholder="Enter number"
  />
</template>

<script>
import { IMaskComponent } from "vue-imask";

export default {
  data() {
    return {
      numberModel: "",
      onAccept(value) {
        console.log(value);
      }
    };
  },
  components: {
    "imask-input": IMaskComponent
  }
};
</script>

to add the input with the mask.

It emits the accept event when the input is valid.

mask sets the format.

In our example, it’s a number.

v-model binds the value to a model state.

placeholder is the placeholder.

radix is the decimal separator.

@trevoreyre/autocomplete-vue is an easy to use autosggest component for Vue apps.

To use it, we run:

npm i @trevoreyre/autocomplete-vue

to install it.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Autocomplete from "@trevoreyre/autocomplete-vue";
import "@trevoreyre/autocomplete-vue/dist/style.css";

Vue.use(Autocomplete);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <autocomplete :search="search"></autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ["apple", "orange", "grape", "banana"]
    };
  },
  methods: {
    search(input) {
      if (input.length < 1) {
        return [];
      }
      return this.fruits.filter(f => {
        return f.toLowerCase().startsWith(input.toLowerCase());
      });
    }
  }
};
</script>

to use it.

We register the plugin and import the CSS.

Then we add the autocomplete component to add the autocomplete input.

The search prop takes a function that lets us search for an item from an input value.

We pass the search method as the value.

input has the inputted value.

It returns an array of items that match.

The function can also return a promise.

We can also denounce the callback, change the base class, and set the default value.

vue-date-fns

vue-date-fns is a Vue wrapper for the vue-date-fns library.

To use it, we first install it by running:

npm i vue-date-fns

Then we can use it by writing:

<template>
  <div id="app">
    <div>{{ new Date() | date }}</div>
  </div>
</template>

<script>
import { dateFilter } from "vue-date-fns";

export default {
  filters: {
    date: dateFilter
  }
};
</script>

We register the filter and use it.

date formats the date into a date string.

We can also use the $date method to manipulate dates.

It also comes with locale data so we can switch to different locales.

We can also change the date format:

<template>
  <div id="app">
    <div>{{ new Date() | date('dd MMMM yyyy') }}</div>
  </div>
</template>

<script>
import { dateFilter } from "vue-date-fns";

export default {
  filters: {
    date: dateFilter
  }
};
</script>

We just pass in an argument into the filter function.

Vue my dropdown component

Vue my dropdown component is an easy to use dropdown component.

To use it, we run:

npm i vue-my-dropdown

to install it.

Then we write:

<template>
  <div id="app">
    <dropdown :visible="visible">
      <span class="link" @click="visible = !visible">click here</span>
      <div slot="dropdown" class="dialog">hello</div>
    </dropdown>
  </div>
</template>

<script>
import dropdown from "vue-my-dropdown";

export default {
  components: { dropdown },
  data() {
    return {
      visible: false
    };
  }
};
</script>

to use it.

It doesn’t come with any styles so we’ve to add them ourselves.

We populate the content of the dropdown slot to populate the dropdown.

We can set the position, add animation, and more.

Vuedals

Vuedals is a modal component for Vue apps.

To use it, we run:

npm i vuedals

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import { default as Vuedals } from "vuedals";

Vue.use(Vuedals);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <button @click="showModal()">show modal</button>
    <vuedal></vuedal>
  </div>
</template>

<script>
import {
  default as Vuedals,
  Component as Vuedal,
  Bus as VuedalsBus
} from "vuedals";

export default {
  components: {
    Vuedal
  },
  methods: {
    showModal() {
      VuedalsBus.$emit("new", {
        name: "modal",
        component: {
          name: "modal",
          template: `
            <div>
              <p>modal</p>
            </div>
          `
        }
      });
    }
  }
};
</script>

to use it.

We call the Vuedals.$emit method to open the modal.

The content is populated by a component.

Conclusion

Vue IMask Plugin is a simple input mask component.

@trevoreyre/autocomplete-vue is an autocomplete component for Vue apps.

vue-date-fns is a wrapper for date-fns for Vue apps.

Vue my dropdown component is a dropdown that we can customize.

Vuedals is a simple modal.

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding a file uploader, draggable dialog, slides, and lightbox.

Vue-Transmit

Vue-Transmit is a handy file uploader widget for Vue apps.

To use it, we run:

npm i vue-transmit

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueTransmit from "vue-transmit";
Vue.use(VueTransmit);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <vue-transmit tag="section" v-bind="options" ref="uploader">
      <div>
        <button class="btn btn-primary" @click="triggerBrowse">Upload Files</button>
      </div>
      <template slot="files" slot-scope="props">
        <div v-for="(file, i) in props.files" :key="file.id" :class="{'mt-5': i === 0}">
          <div class="media">
            <img :src="file.dataUrl" class="img-fluid d-flex mr-3">
          </div>
        </div>
      </template>
    </vue-transmit>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        acceptedFileTypes: ["image/*"],
        url: "./upload",
        clickable: false
      }
    };
  },
  methods: {
    triggerBrowse() {
      this.$refs.uploader.triggerBrowseFiles();
    }
  },
  filters: {
    json(value) {
      return JSON.stringify(value, null, 2);
    }
  }
};
</script>

We use the vue-transmit component to add an upload button with a preview.

To display the preview, we populate the files slot to display the preview by using the dataUrl property.

We set the options for the modal by passing in the options with v-bind .

We set the acceptedFileTypes to set the file types the uploader accepts.

url is the URL to upload the data to.

It takes many other customization options that we can use to change how it behaves.

Drag and drop are also supported.

vue-dialog-drag

vue-dialog-drag is a draggable dialog for Vue apps.

To use it, we run:

npm i vue-dialog-drag

Then we write:

<template>
  <div id="app">
    <dialog-drag id="dialog-1">
      <p>Test dialog</p>
    </dialog-drag>
    <drop-area [@drop](http://twitter.com/drop "Twitter profile for @drop")="drop">
      <p>Drop Here</p>
    </drop-area>
  </div>
</template>

<script>
import DialogDrag from "vue-dialog-drag";
import DropArea from "vue-dialog-drag/dist/drop-area";

export default {
  name: "app",
  components: {
    DialogDrag,
    DropArea
  },
  methods: {
    drop(id) {
      console.log(id);
    }
  }
};
</script>

<style src="vue-dialog-drag/dist/vue-dialog-drag.css"></style>
<style src="vue-dialog-drag/dist/drop-area.css"></style>
<style src="vue-dialog-drag/dist/dialog-styles.css"></style>

to use it.

We use the built it dialog-drag and drop-area components with the built-in styles.

Now we can drag the dialog to the drop zone.

Vueper Slides

Vueper Slides is a slides library for Vue apps.

To install it, we run:

npm i vueperslides

Then we can use it by writing:

<template>
  <div id="app">
    <vueper-slides>
      <vueper-slide v-for="n in 10" :key="n" :title="`title ${n}`" :content="`slide ${n}`"/>
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  components: { VueperSlides, VueperSlide }
};
</script>

We use the vueper-slides component to show the slides.

Also, we have to import the CSS to load the style of the slides.

vueper-slide renders the slides.

We pass in the title to display the title and content to display the content.

vue-easy-lightbox

vue-easy-lightbox is a simple lightbox component for Vue apps.

To use it, we run:

npm i vue-easy-lightbox

to install it.

Then we write:

<template>
  <div id="app">
    <div>
      <div v-for="(src, index) in imgs" :key="index" class="pic" @click="() => showImg(index)">
        <img :src="src">
      </div>
    </div>
    <vue-easy-lightbox :visible="visible" :imgs="imgs" :index="index" [@hide](http://twitter.com/hide "Twitter profile for @hide")="handleHide"></vue-easy-lightbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      index: 0,
      imgs: [
        "https://placeimg.com/300/300/any",
        "https://placekitten.com/300/300"
      ]
    };
  },
  methods: {
    showImg(index) {
      this.index = index;
      this.visible = true;
    },
    handleHide() {
      this.visible = false;
    }
  }
};
</script>

to add the images and the lightbox.

vue-easy-lightbox has the lightbox component.

We click on the image and we’ll see the image.

To customize it, we can populate various slots to change the lightbox content.

The toolbar slot changes the toolbar.

next-btn slot changes the next button.

prev-btn slot changes the previous button.

close-btn slot changes the close button.

We can also listen to the events that are emitted by the lightbox.

Conclusion

Vue-Transmit is an easy to use uploader component.

vue-dialog-drag is a draggable dialog box.

Vueper Slides lets us add slides to our app.

vue-easy-lightbox is a handy lightbox component.

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding drag and drop elements, animation, and debouncing.

Vue Slicksort

Vue Slicksort is an easy to use package that lets us create sortable lists in our Vue app in a snap.

To use it, we run:

npm i vue-slicksort

to install it.

Then we write:

<template>
  <div class="root">
    <SlickList lockAxis="y" v-model="items">
      <SlickItem v-for="(item, index) in items" :index="index" :key="index">{{ item }}</SlickItem>
    </SlickList>
  </div>
</template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";

export default {
  components: {
    SlickItem,
    SlickList
  },
  data() {
    return {
      items: Array(20).fill().map((_, i)=> `item ${i}`)
    };
  }
};
</script>

to use it.

We use the SlickList item for creating the container.

Then we put SlickItem components inside it to display the sortable list.

Now we can drag and drop items on the list.

vue-dragula

vue-dragula is another easy to use drag and drop library for Vue apps.

To use it, we run:

npm i vue-dragula

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
const VueDragula = require("vue-dragula");

Vue.use(VueDragula);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div class="root">
    <div class="container" v-dragula="colOne" bag="first-bag">
      <div v-for="text in colOne" :key="text">{{text}}</div>
    </div>
    <div class="container" v-dragula="colTwo" bag="first-bag">
      <div v-for="text in colTwo" :key="text">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colOne: Array(15)
        .fill()
        .map((_, i) => `item ${i}`),
      colTwo: Array(15)
        .fill()
        .map((_, i) => `item ${i + 20}`)
    };
  }
};
</script>

We created 2 draggable lists with the v-dragula directive.

We set the bag prop to the same name so that we can drag and drop between them.

Inside each container, we render the elements that are draggable.

vue-dragscroll

vue-dragscroll is a directive that lets us enable scrolling by dragging our mouse.

To use it, we run:

npm i vue-dragscroll

to install it.

Then we write:

<template>
  <div class="root">
    <div v-dragscroll id="scroll">
      <div v-for="i in items" :key="i">{{i}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array(50)
        .fill()
        .map((_, i) => `item ${i}`)
    };
  }
};
</script>

<style>
#scroll {
  height: 300px;
  overflow-y: scroll;
}
</style>

to create a div that’s scrollable by clicking and holding our mouse and moving it.

We can use the x and y modifiers to only enable or disabling drag scrolling in one direction.

Also, we can disable drag scrolling for child elements.

Vue Animate CSS

Vue Animate CSS lets us add animation effects to our app without creating them from scratch ourselves.

We can install it by running:

npm i v-animate-css

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VAnimateCss from "v-animate-css";

Vue.use(VAnimateCss);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div class="root">
    <div v-animate-css="'fadeIn'">foo</div>
  </div>
</template>

<script>
export default {};
</script>

We add a fade-in animation effect by using the v-animate-css directive with the string 'fadeIn' .

There are many other effects we can add to our app with this library.

vue-debounce

We can use vue-debounce to delay a callback’s running.

To use it, we run:

npm i vue-debounce

to install it.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import vueDebounce from "vue-debounce";

Vue.use(vueDebounce);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div class="root">
    <input v-debounce:300ms="log" type="text">
  </div>
</template>

<script>
export default {
  methods: {
    log(e){
      console.log(e)
    }
  }
};
</script>

We use the v-debounce directive with the 300ms modifier to delay the log method for 300 milliseconds before running it.

Then we can get the inputted value from it when we run it.

Conclusion

Vue Slicksort and vue-dragula let us add draggable elements to our app.

Vue Animate CSS is a library that lets us add CSS animation effects without writing them from scratch.

vue-debounce is a library for delaying callbacks.