Top Vue Packages for Lazy Loading Image, Handling Keyboard Shortcut and More
Tags: vue, javascript
Published: 2020-07-26 23:58:55

---
title: Top Vue Packages for Lazy Loading Image, Handling Keyboard Shortcut and More
published: true
date: 2020-07-26 23:41:07 UTC
tags: vue,javascript
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-lazy-loading-image-handling-keyboard-shortcut-and-more/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-lazy-loading-image-handling-keyboard-shortcut-and-more
---
**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](https://thewebdev.info/2020/07/26/top-vue-packages-for-lazy-loading-image-handling-keyboard-shortcut-and-more/) appeared first on [The Web Dev](https://thewebdev.info).