Vue.js: 11 Practical Projects

Ivaylo Gerchev, Deji Atoyebi, Christopher Vundi, Nilson Jacques, Michael Wanyoike, Yomi Eluwande, James Hibbard

Description

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:

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

Sujets

• Langages
• Computers
• Informatique
• JavaScript

Informations

• Publié par: SitePoint
• Date de parution: 06 juin 2019
• Nombre de lectures: 1
• EAN13: 9781492071365
• Langue: English

Extrait

Vue.js: 11 Practical Projects
Copyright © 2019 SitePoint Pty. Ltd.
Ebook ISBN: 978-1-925836-27-1 Cover Design: Alex Walker Project Editor: James Hibbard
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [e-mail]

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design, and more.

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: Build a Basic CRUD App with Vue.js, Node and MongoDB by James Hibbard Creating Beautiful Charts Using Vue.js Wrappers for Chart.js by Yomi Eluwande Build a Real-time Chat App with Pusher and Vue.js by Michael Wanyoike Building a Vue Front End for a Headless CMS by Michael Wanyoike How to Build a Chrome Extension with Vue by James Hibbard Build Your Own Link-sharing Site with Nuxt.js and vue-kindergarten by Nilson Jacques An Introduction to Data Visualization with Vue and D3.js by Christopher Vundi How to Build a Reusable Component with Vue by Deji Atoyebi How to Build a Game with Vue.js by Ivaylo Gerchev Build a Shopping List App with Vue, Vuex and Bootstrap Vue by Michael Wanyoike 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

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: Build a Basic CRUD App with Vue.js, Node and MongoDB
by James Hibbard
Most web applications need to persist data in one form or other. When working with a server-side language, this is normally a straightforward task. However, when you add a front-end JavaScript framework to the mix, things start to get a bit trickier.
In this tutorial, I’m going to show you how to build a simple CRUD app (Create, Read, Update and Delete) using Node, MongoDB and Vue. I’ll walk you through getting all of the pieces set up and demo each of the CRUD operations. After reading, you’ll be left with a fully functional app that you can adapt to your own purposes. You’ll also able to use this approach in projects of your own.
As the world really doesn’t need another to-do list, we’ll be building an app to help students of a foreign language learn vocabulary. As you might notice from my author bio, I’m a Brit living in Germany and this is something I wish I’d had 20 years ago.
You can check out the finished product in this GitHub repo . And if you’re stuck for German words at any point, try out some of these .
Install the Tooling
In this section, we’ll install the tools we’ll need to create our app. These are Node, npm, MongoDB, MongoDB Compass (optional) and Postman. I won’t go too into depth on the various installation instructions, but if you have any trouble getting set up, please visit our forums and ask for help there.
Node.js
Many websites will recommend that you head to the official Node download page and grab the Node binaries for your system. While that works, I’d suggest using a version manager (such as nvm ) instead. This is a program which allows you to install multiple versions of Node and switch between them at will. If you’d like to find out more about this, please consult our quick tip, Install Multiple Versions of Node.js Using nvm .
npm
npm is a JavaScript package manager which comes bundled with Node, so no extra installation is necessary here. We’ll be making quite extensive use of npm throughout this tutorial, so if you’re in need of a refresher, please consult A Beginner’s Guide to npm — the Node Package Manager .
MongoDB
MongoDB is a document database which stores data in flexible, JSON-like documents.
The quickest way to get up and running with Mongo is to use a service such as mLabs. They have a free sandbox plan which provides a single database with 496MB of storage running on a shared virtual machine. This is more than adequate for a simple app with a handful of users. If this sounds like the best option for you, please consult their quick start guide .
You can also install Mongo locally. To do this, please visit the official download page and download the correct version of the community server for your operating system. There’s a link to detailed, OS-specific installation instructions next to the download link.
A MongoDB GUI
Although not strictly necessary for following along with this tutorial, you might also like to install Compass, the official GUI for MongoDB . This tool helps you visualize and manipulate your data, allowing you to interact with documents with full CRUD functionality.
At the time of writing, you’ll need to fill out your details to download Compass, but you won’t need to create an account.
Postman
This is an extremely useful tool for working with and testing APIs. You can download the correct version for your OS from the project’s home page . You can find OS-specific installation instructions here .
Check That Everything Is Installed Correctly
To check that Node and npm are installed correctly, open your terminal and type this:
node -v
Follow that with this:
npm -v
This will output the version number of each program ( 11.1.0 and 6.4.1 respectively at the time of writing).
If you installed Mongo locally, you can check the version number using this:
mongo --version
This should output a bunch of information, including the version number ( 4.0.4 at the time of writing).
Check the Database Connection Using Compass
If you have installed Mongo locally, you start the server by typing the following command into a terminal:
mongod
Next, open Compass. You should be able to accept the defaults (Hostname: localhost , Port: 27017), press the CONNECT button, and establish a connection to the database server.
Note that the databases admin , config and local are created automatically.
Using a Cloud-hosted Solution
If you’re using mLabs, create a database subscription (as described in their quick-start guide ), then copy the connection details to the clipboard. This should be in the following form:
mongodb://<dbuser>:<dbpassword>@<instance>.mlab.com:<port>/<dbname>
When you open Compass, it will inform you that it has detected a MongoDB connection string and asks if you’d like to use it to fill out the form. Click Yes , then click CONNECT and you should be off to the races.
Note that I called my database node-vue-crud-app . You can call yours what you like.
Creating the Node Back End
In this section, we’ll create a RESTful API for our Vue front end to consume and test it using Postman. I don’t want to go into too much detail on how a RESTful API works, as the focus of this guide should be the Vue front end. If you’d like a more in-depth tutorial, there are plenty on the Internet. I found that Build Node.js RESTful APIs in 10 Minutes was quite easy to follow, and it served as inspiration for the code in this section.
Basic Setup
First, let’s create the files and directories we’ll need and initialize the project:
mkdir -p vocab-builder/server/api/{controllers,models,routes}cd voc