Preface

Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

This book contains a selection of 11 practical projects covering different aspects of working with Vue. It contains:

1. Build a Basic CRUD App with Vue.js, Node and MongoDB by James Hibbard
2. Creating Beautiful Charts Using Vue.js Wrappers for Chart.js by Yomi Eluwande
3. Build a Real-time Chat App with Pusher and Vue.js by Michael Wanyoike
4. Building a Vue Front End for a Headless CMS by Michael Wanyoike
5. How to Build a Chrome Extension with Vue by James Hibbard
6. Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten by Nilson Jacques
7. An Introduction to Data Visualization with Vue and D3.js by Christopher Vundi
8. How to Build a Reusable Component with Vue by Deji Atoyebi
9. How to Build a Game with Vue.js by Ivaylo Gerchev
10. Build a Shopping List App with Vue, Vuex and Bootstrap Vue by Michael Wanyoike
11. How to Develop and Test Vue Components with Storybook by Ivaylo Gerchev

Who Should Read This Book?

This book is for developers with experience of JavaScript.

Conventions Used

Code Samples

Code in this book is displayed using a fixed-width font, like so:

<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.</p>
			

Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:

function animate() {
    ⋮
new_variable = "Hello";
}

Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:

URL.open("http://www.sitepoint.com/responsive-web-
➥design-real-user-testing/?responsive1");

You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

Tips, Notes, and Warnings