Category: Vue

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 timelines, text editors, animating numbers, and smooth reflow.

vue-cute-timeline

vue-cute-timeline is a timeline component that we can use with Vue apps.

To install it, we run:

npm i vue-cute-timeline

Then we can use it by writing:

<template>
  <div id="app">
    <timeline>
      <timeline-title>title</timeline-title>
      <timeline-item bg-color="#9dd8e0">foo</timeline-item>
      <timeline-item :hollow="true">bar</timeline-item>
    </timeline>
  </div>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";

export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>

We just import the timeline components.

Then we get a vertical timeline with the content between the tags.

bg-color has a background color.

hollow makes the dot hollow.

vue-ckeditor2

vue-ckeditor2 is a package that we can use to add swipe gesture components.

To use it, we run:

npm i npm i vue-ckeditor2-swiper

to install it.

Then we can use it by writing:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>codesandbox</title>
    <script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but codesandbox doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div>
    <vue-ckeditor
      v-model="content"
      :config="config"
      @blur="onBlur($event)"
      @focus="onFocus($event)"
      @contentDom="onContentDom($event)"
      @dialogDefinition="onDialogDefinition($event)"
      @fileUploadRequest="onFileUploadRequest($event)"
      @fileUploadResponse="onFileUploadResponse($event)"
    />
  </div>
</template>

<script>
import VueCkeditor from "vue-ckeditor2";

export default {
  components: { VueCkeditor },
  data() {
    return {
      content: "",
      config: {
        toolbar: [
          ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript"]
        ],
        height: 300
      }
    };
  },
  methods: {
    onBlur(evt) {
      console.log(evt);
    },
    onFocus(evt) {
      console.log(evt);
    },
    onContentDom(evt) {
      console.log(evt);
    },
    onDialogDefinition(evt) {
      console.log(evt);
    },
    onFileUploadRequest(evt) {
      console.log(evt);
    },
    onFileUploadResponse(evt) {
      console.log(evt);
    }
  }
};
</script>

We add the CKEditor script in index.html so that we can use the package.

Then we put the vue-ckeditor component in our app.

v-model binds to the content that we enter.

We should see the bold, italics, and strikethrough buttons since we specified that in the toolbar property.

Vue Smooth Reflow (VSR)

Vue Smooth Reflow will add transitions to any reflows, including toggle on and off elements and manipulating lists.

To use it, we first install it by running:

npm i vue-smooth-reflow

Then we can use it by writing:

main.js

<template>
  <div>
    <div v-for="n in nums" :key="n">{{n}}</div>
  </div>
</template>

<script>
import smoothReflow from "vue-smooth-reflow";
export default {
  mixins: [smoothReflow],
  data() {
    return {
      nums: []
    };
  },
  mounted() {
    this.$smoothReflow();
    const timer = setInterval(() => {
      if (this.nums.length === 10) {
        clearInterval(timer);
      }
      this.nums.push(this.nums.length);
    }, 500);
  }
};
</script>

We register the mixin, and then we use the $smoothReflow method to enable smooth reflow.

Then we add a timer to add items to nums , which will be rendered with v-for .

We add an item every half a second.

Now the items will be animated with a transition effect when it’s added.

vue-animate-number

vue-animate-number is a useful package for letting us animate numbers.

To use it, we install the package by writing:

npm i vue-animate-number

Then we use the package by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueAnimateNumber from "vue-animate-number";
Vue.use(VueAnimateNumber);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <animate-number from="1" to="10" duration="1000" easing="easeOutQuad" :formatter="formatter"></animate-number>
  </div>
</template>

<script>
export default {
  methods: {
    formatter(num) {
      return num.toFixed(2);
    },

    startAnimate() {
      this.$refs.myNum.start();
    }
  }
};
</script>

We add the animate-number component.

from is the starting number for the animation.

to is the ending number for the animation.

duration is the length of the animation in milliseconds.

easing lets us animate in a nonlinear fashion.

formatter is the formatter function for the number. Every value will go through the function before it’s displayed.

Conclusion

vue-cute-timeline lets us add a vertical timeline to our Vue app.

vue-ckeditor2 lets us add a text editor to our app.

Vue Smooth Reflow (VSR) adds transition effects for reflows.

vue-animate-number allows us to animate number displays.

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 loading spinner, carousel, rendering Markdown to HTML, display a QR code, and show a sidebar menu.

vue-owl-carousel

vue-owl-carousel lets us add an image carousel to our Vue app.

To use it, we run:

npm i vue-owl-carousel

to install it.

Then we write:

<template>
  <div>
    <carousel>
      <img v-for="n in 10" :key="n" :src="`https://placeimg.com/200/200/any?${n}`">
    </carousel>
  </div>
</template>

<script>
import carousel from "vue-owl-carousel";

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

to add a carousel to our app.

We use the carousel component to add the carousel.

Then we add images between the tags to populate the images.

Navigation is displayed automatically when the screen can’t display all the images on the screen simultaneously.

It takes a few props.

autoplay lets us enable autoplay.

nav lets us enable or disable the navigation.

It also emits a few events.

changed and updated events are emitted.

vue-sidebar-menu

vue-sidebar-menu is a library that lets us add a sidebar easily into our Vue app.

To install it, we run:

npm i vue-sidebar-menu

Then we write:

<template>
  <div>
    <sidebar-menu :menu="menu"/>
  </div>
</template>

<script>
import { SidebarMenu } from "vue-sidebar-menu";
import "vue-sidebar-menu/dist/vue-sidebar-menu.css";

export default {
  components: {
    SidebarMenu
  },
  data() {
    return {
      menu: [
        {
          header: true,
          title: "menu",
          hiddenOnCollapse: true
        },
        {
          href: "/",
          title: "user",
          icon: "fa fa-user"
        },
        {
          href: "/charts",
          title: "charts",
          icon: "fa fa-chart-area",
          child: [
            {
              href: "/charts/sublink",
              title: "child"
            }
          ]
        }
      ]
    };
  }
};
</script>

to add it.

icon is for the classes for the icons.

href is the path to do to.

child is the child links.

title is the name that’s displayed on the menu entry.

hiddenOnCollapse lets us choose whether to hide the menu on collapse or not.

Vue Showdown

Vue Showdown is a Markdown display component.

We can use it to render Markdown into HTML.

To install it, we run:

npm install vue-showdown

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueShowdown from "vue-showdown";

Vue.use(VueShowdown, {
  flavor: "github",
  options: {
    emoji: false
  }
});
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <VueShowdown markdown="## markdown" flavor="github" :options="{ emoji: true }"/>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

We use the VueShowdown component by registering it with some options.

flavor is the flavor of Markdown we render.

emoji lets us choose to render emoji or not.

We pass the Markdown into the markdown prop.

v-qrcode

v-qrcode lets us render QR codes in our Vue app.

To use it, we run:

npm i v-qrcode

to install it.

Then we write:

<template>
  <div>
    <qrcode :cls="qrCls" :value="qrText"></qrcode>
  </div>
</template>

<script>
import Qrcode from "v-qrcode";

export default {
  data() {
    return {
      qrCls: "qrcode",
      qrText: "hello"
    };
  },

  components: {
    Qrcode
  }
};
</script>

to use it.

We pass in the cls prop to set the class name of the wrapper.

value is the string to generate the QR code from.

We can also change the size, level, background, foreground, adding, and what element to render the code in.

vue-element-loading

The vue-element-loading plugin lets us add a loading spinner to our Vue app.

To use it, we run:

npm i vue-element-loading

to install it.

Then we write: main.js

import Vue from "vue";
import App from "./App.vue";
import VueElementLoading from "vue-element-loading";

Vue.component("VueElementLoading", VueElementLoading);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-element-loading active spinner="bar-fade-scale"/>
  </div>
</template>

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

to use it.

We have the vue-element component which loads the spinner.

active makes it show.

spinner lets us set the type of spinner we want to display.

Conclusion

vue-owl-carousel is an easy to use carousel library.

vue-sidebar-menu lets us display a sidebar menu in our app.

Vue Showdown renders Markdown into HTML.

v-qrcode displays a QR code created from a string.

vue-element-loading is a loading spinner.

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 detecting clicks away from an element, adding a context menu, changing metadata, and adding split panes.

vue-meta-info

vue-meta-info is a Vue plugin to let us set metadata for our Vue app.

To use it, we run:

npm install vue-meta-info --save

to install the package.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import MetaInfo from "vue-meta-info";

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

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

App.vue

<template>
  <div></div>
</template>

<script>
export default {
  metaInfo: {
    title: "my app",
    meta: [
      {
        name: "keyWords",
        content: "my app"
      }
    ],
    link: [
      {
        rel: "assets",
        href: "https://assets-cdn.github.com/"
      }
    ]
  }
};
</script>

We import the plugin, then we can pass in the metaInfo property to set all the meta data.

title is the title.

meta are the meta attributes.

name is the attribute name and content is the value.

link is the link tag. rel is the rel attribute, href is the href attribute.

vue-linkify

vue-linkify is a plugin that automatically turns any text that looks like a URL into a link.

To use it, we run:

npm i vue-linkify

to install it.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import linkify from "vue-linkify";

Vue.directive("linkified", linkify);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <div v-html="raw" v-linkified/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      raw: "Hello from example.com"
    };
  }
};
</script>

We have the v-linkified directive and we set our raw text as the value of the v-html directive so we can render the link.

Also, we can change the class name of the link so that we can style it.

We can write:

<template>
  <div id="app">
    <div v-html="raw" v-linkified:options="{ className: 'example' }"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      raw: "Hello from example.com"
    };
  }
};
</script>

and the link will have class example .

Splitpanes

Splitpanes is a layout component for Vue apps.

To use it, we run:

npm i splitpanes

to install it.

Then we write:

<template>
  <div id="app">
    <splitpanes style="height: 400px">
      <pane min-size="20">1</pane>
      <pane>
        <splitpanes horizontal>
          <pane>2</pane>
          <pane>3</pane>
        </splitpanes>
      </pane>
      <pane>4</pane>
    </splitpanes>
  </div>
</template>

<script>
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
  components: { Splitpanes, Pane }
};
</script>

to use it.

We define panes to lay our columns, and we can nest them.

All we have to do is to use the splitpanes and pane component.

vue-clickaway2

We can use the vue-clickaway2 package to add detect clicks outside an element.

To use it, we run:

npm i vue-clickaway2

to install it.

Then we write:

<template>
  <div id="app">
    <p v-on-clickaway="away">Click away</p>
  </div>
</template>

<script>
import { mixin as clickaway } from "vue-clickaway2";

export default {
  mixins: [clickaway],
  methods: {
    away() {
      console.log("clicked away");
    }
  }
};
</script>

to use it.

We use the v-on-clickaway directive to run a method when we click outside the p element.

Also, we can add modifiers to detect various mouse events.

For instance, we can add mousedown to detect a mousedown event instead of a click event.

v-contextmenu

v-contextmenu is a context menu component that we can use in our Vue app.

To use it, we run:

npm i v-contextmenu vue-runtime-helpers

to install it.

It has vue-runtime-helpers as a dependency.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import contentmenu from "v-contextmenu";
import "v-contextmenu/dist/index.css";

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

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

App.vue

<template>
  <div id="app">
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item>foo</v-contextmenu-item>
      <v-contextmenu-item>bar</v-contextmenu-item>
      <v-contextmenu-item>baz</v-contextmenu-item>
    </v-contextmenu>

    <div v-contextmenu:contextmenu>right click here</div>
  </div>
</template>

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

We register the plugin.

Then we use the v-contextmenu component to let us show a context menu when we right-click on it.

The modifier is the ref of the context menu’s name.

Then we use the v-contextmenu to add our context menu.

The component can be nested to create a nested menu.

Conclusion

vue-meta-info lets us change the title and metadata of our Vue app.

Splitpanes lets us add a split pane.

vue-clickaway2 detects clicks outside an element.

v-contextmenu is a context menu component for our app.