How to do it...

For this recipe, you will build a reusable component that shakes whatever you put into it; for this, we will use the excellent CSShake library.

Create a new clean project based on the Webpack template. You can take a look at the previous recipe to see how to do that, or you can use the prebuilt template I made. You can use my template by creating a new directory and running this command:

vue init gurghet/webpack

Choose the default answers if you don't know what they mean. Remember to run npm install to bring in the dependencies.

Let's first rename a couple of things: rename the App.vue file to Shaker.vue.

Inside it, write the following as the HTML template:

<template>  <span id="shaker" class="shake"> <link rel="stylesheet" ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.