Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

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 how the best packages for lazy loading images, handling keyboard shortcuts, adding a code editor, and adding numeric inputs.

v-lazy-image

We can add the v-lazy-image package to add lazy loading capability for images to our app.

To use it, we can run:

npm i v-lazy-image

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import { VLazyImagePlugin } from "v-lazy-image";

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

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

App.vue

<template>
  <v-lazy-image src="http://placekitten.com/500/500"/>
</template>

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

We just add the v-lazy-image component.

Also, we can add a fallback image and a blurring effect for the images when it’s loading:

<template>
  <v-lazy-image
    src="http://placekitten.com/500/500"
    src-placeholder="http://placekitten.com/200/200"
  />
</template>

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

 <style scoped>
.v-lazy-image {
  filter: blur(20px);
  transition: filter 0.7s;
}
.v-lazy-image-loaded {
  filter: blur(0);
}
</style>

We style the v-lazy-image and v-lazy-image-loaded to get the blurring effect when it’s loading.

It also emits the intersect and load events.

srcset lets us add multiple images with different sizes to load them according to different sizes.

vue-shortkey

vue-shortkey lets us add keyboard shortcut handling to our Vue app.

We can install it by running:

npm i vue-shortkey

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
Vue.use(require("vue-shortkey"));

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <button v-shortkey="['ctrl', 'alt', 'o']" @shortkey="theAction">button</button>
  </div>
</template>

<script>
export default {
  methods: {
    theAction(event) {
      alert("hello");
    }
  }
};
</script>

We registered the plugin and then add the v-shortkey directive to a button.

The array has the keys we want in the key combination.

shortkey event is emitted when the key combo is pressed.

Then theAction is run.

We can also handle multiple key combos in one handler.

To do that, we write:

<template>
  <div>
    <button v-shortkey="{up: ['arrowup'], down: ['arrowdown']}" @shortkey="theAction">button</button>
  </div>
</template>

<script>
export default {
  methods: {
    theAction(event) {
      switch (event.srcKey) {
        case "up":
          alert("up");
          break;
        case "down":
          alert("down");
          break;
        default:
          alert("default");
          break;
      }
    }
  }
};
</script>

We pass in an object to the directive.

Then we check in the theAction method to check the key pressed.

vue-prism-editor

The vue-prism-editor lets us add a simple code editor with syntax highlighting and line numbers.

To install it, we can run:

npm i vue-prism-editor prismjs

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import "prismjs";
import "prismjs/themes/prism.css";
import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles
Vue.component("prism-editor", VuePrismEditor);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <prism-editor v-model="code" language="js"></prism-editor>
    <pre>{{code}}</pre>
  </div>
</template>

<script>
import PrismEditor from "vue-prism-editor";
export default {
  components: {
    PrismEditor
  },
  data() {
    return {
      code: ""
    };
  }
};
</script>

to add the prism-editor to our app.

We set the language to js to highlight JavaScript.

v-model binds the entered code to the code state.

It supports many features like undo or redo, copy and paste, preserving indentation and more.

It emits change, keydown, keyup, and editor-click events.

We can add line numbers with the lineNumbers prop.

We can also disable the editor or make it read-only.

rackbeat-vue-numeric

rackbeat-vue-numeric lets us add a numeric input to our app.

To install it, we run:

npm i rackbeat-vue-numeric

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueNumeric from "vue-numeric";

Vue.use(VueNumeric);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
    <p>{{price}}</p>
  </div>
</template>

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

We set the currency symbol to the currency prop.

separator is the thousands separator.

v-model binds the input value to the price state when it’s a valid number.

We can restrict the valid range with min and max and set the placeholder prop with a value for the placeholder.

Conclusion

v-lazy-image lets us add lazy load images.

vue-shortkey lets us add keyboard shortcut handling.

rackbeat-vue-numeric lets us add numeric inputs to our app.

vue-prism-editor is an easy to add code editor that we can use in our Vue app.

The post Top Vue Packages for Lazy Loading Image, Handling Keyboard Shortcut and More appeared first on The Web Dev.