Vue.js 2 and Bootstrap 4 Web Development

Olga Filipova

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781788291644
• Edition: 1
• Topic: Informatique
• Subtopic: Programmation Web

Learn how to combine Bootstrap with Vue.js to build responsive web applications.About This Book• Build applications with a good architecture and clean UI with Vue.js and Bootstrap• Understand Bootstrap components and learn to integrate them with the Vue.js structure• Build, deploy, and test your code with various utility tools provided by Vue.jsWho This Book Is ForThis book is for JavaScript programmers who are new to web frameworks and want to start learning it by developing interactive and responsive web applications.What You Will Learn• Create and build web applications using Vue.js, Webpack, and Nuxt.js• Combine Bootstrap components with Vue.js' power to enrich your web applications with reusable elements• Connect the Vuex state management architecture to the Firebase cloud backend to persist and manage application data• Explore the new grid system of Bootstrap 4 along with the far simpler directives in Vue.js• Test Vue applications using Jest • Authenticate your application using Bootstrap's forms, Vue.js' reactivity, and Firebase's authentication API• Deploy your application using Firebase, which provides Backend as a ServiceIn DetailIn this book, we will build a full stack web application right from scratch up to its deployment.We will start by building a small introduction application and then proceed to the creation of a fully functional, dynamic responsive web application called ProFitOro. In this application, we will build a Pomodoro timer combined with office workouts. Besides the Pomodoro timer and ProFitOro workouts will enable authentication and collaborative content management. We will explore topics such as Vue reactive data binding, reusable components, routing, and Vuex store along with its state, actions, mutations, and getters. We will create Vue applications using both webpack and Nuxt.js templates while exploring cool hot Nuxt.js features such as code splitting and server-side rendering. We will use Jest to test this application, and we will even revive some trigonometry from our secondary school!While developing the app, you will go through the new grid system of Bootstrap 4 along with Vue.js' directives. We will connect Vuex store to the Firebase real-time database, data storage, and authentication APIs and use this data later inside the application's reactive components. Finally, we will quickly deploy our application using the Firebase hosting mechanism.Style and ApproachStep-by-step tutorial

Vue.js 2 and Bootstrap 4 Web Development

---

Table of Contents

Vue.js 2 and Bootstrap 4 Web Development

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Please Introduce Yourself – Tutorial

Hello, user

Creating a project in the Firebase console

Adding a first entry to the Firebase application database

Scaffolding a Vue.js application

Connecting the Vue.js application to the Firebase project

Adding a Bootstrap-powered markup

Adding a form using Bootstrap

Making things functional with Vue.js

Adding utility functions to make things look nicer

Exercise

Extracting message cards to their own component

Exercise

Deploying your application

Extra mile – connecting your Firebase project to a custom domain

Summary

2. Under the Hood – Tutorial Explained

Vue.js

Vue project – getting started

Including directly in script

CDN

NPM

Vue-cli

Vue directives

Conditional rendering

Text versus HTML

Loops

Binding data

Handling events

Vue components

Exercise

Vue router

Vuex state management architecture

Bootstrap

Bootstrap components

Bootstrap utilities

Bootstrap layout

Combining Vue.js and Bootstrap

Exercise

Combining Vue.js and Bootstrap continued

What is Firebase?

Summary

3. Let's Get Started

Stating the problem

Gathering requirements

Personas

User stories

Retrieving nouns and verbs

Nouns

Verbs

Mockups

The first page – login and register

The main page displaying the Pomodoro timer

Workout during the break

Settings

Statistics

Workouts

Logo

Summary

4. Let It Pomodoro!

Scaffolding the application

Defining ProFitOro components

Exercise

Implementing the Pomodoro timer

SVG and trigonometry

Exercise

Implementing the countdown timer component

Responsiveness and adaptiveness of the countdown timer using Bootstrap

Countdown timer component – let's count down time!

Exercise

Pomodoro timer

Exercise

Introducing workouts

Summary

5. Configuring Your Pomodoro

Setting up a Vuex store

Defining actions and mutations

Setting up a Firebase project

Connecting the Vuex store to the Firebase database

Exercise

Summary

6. Please Authenticate!

AAA explained

How does authentication work with Firebase?

How to connect the Firebase authentication API to a web application

Authenticating to the ProFitOro application

Making the authentication UI great again

Managing the anonymous user

Personalizing the Pomodoro timer

Updating a user's profile

Summary

7. Adding a Menu and Routing Functionality Using vue-router and Nuxt.js

Adding navigation using vue-router

Exercise - restrict the navigation according to the authentication

Using Bootstrap navbar for navigation links

Code splitting or lazy loading

Server-side rendering

Nuxt.js

Adding links with nuxt-link

Exercise – making the menu button work

Nuxt.js and Vuex store

Nuxt.js middleware

Exercise – finish 'em all!

Summary

8. Let's Collaborate – Adding New Workouts Using Firebase Data Storage and Vue.js

Creating layouts using Bootstrap classes

Making the footer nice

Storing new workouts using the Firebase real-time database

Storing images using the Firebase data storage

Let's search!

Using a Bootstrap modal to show each workout

Exercise

It's time to apply some style

Summary

9. Test Test and Test

Why is testing important?

What is Jest?

Getting started with Jest

Coverage

Testing utility functions

Mocking with Jest

Testing Vuex store with Jest

Testing mutations

Asynchronous testing with Jest – testing actions

Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components

Testing Vue components using Jest

Snapshot testing with Jest

Summary

10. Deploying Using Firebase

Deploying from your local machine

Setting up CI/CD using CircleCI

Setting up staging and production environments

What have we achieved?

Summary

Index

Vue.js 2 and Bootstrap 4 Web Development

Copyright © 2017 Packt Publishing

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 embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: September 2017

Production reference: 1250917

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78829-092-0

www.packtpub.com

Credits

Author

Olga Filipova

Reviewer

Jan-Christian Nikles

Commissioning Editor

Kunal Chaudhari

Acquisition Editor

Reshma Raman

Content Development Editor

Nikhil Borkar

Technical Editor

Jijo Maliyekal

Copy Editor

Safis Editing

Project Coordinator

Ulhas Kambali

Proofreader

Safis Editing

Indexer

Rekha Nair

Graphics

Abhinash Sahu

Production Coordinator ...

Table of contents

• Vue.js 2 and Bootstrap 4 Web Development