Vue.js 2 and Bootstrap 4 web development : build Responsive SPAs with Bootstrap 4, Vue.js 2, and Firebase / Olga Filipova.

Format:

Book

Author/Creator:

Filipova, Olga, author.

Language:

English

Subjects (All):

Bootstrap (Computer program).

JavaScript (Computer program language).

Physical Description:

1 online resource (1 volume) : illustrations

Edition:

1st edition

Other Title:

Vue.js two and Bootstrap four web development

Place of Publication:

Birmingham, England ; Mumbai, [India] : Packt Publishing, 2017.

System Details:

text file

Summary:

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.js Who This Book Is For This 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 Service In Detail In 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 Approach Step-by-step tutorial Downloading the example c...

Contents:

Cover

Copyright

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

Customer Feedback

Table of Contents

Preface

Chapter 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

Deploying your application

Extra mile - connecting your Firebase project to a custom domain

Summary

Chapter 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

Vue router

Vuex state management architecture

Bootstrap

Bootstrap components

Bootstrap utilities

Bootstrap layout

Combining Vue.js and Bootstrap

Combining Vue.js and Bootstrap continued

What is Firebase?

Chapter 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

Chapter 4: Let It Pomodoro!

Scaffolding the application

Defining ProFitOro components

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!

Pomodoro timer

Introducing workouts

Chapter 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

Chapter 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

Chapter 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!

Chapter 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

It's time to apply some style

Chapter 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

Chapter 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?

Index.

Notes:

Includes index.

Description based on online resource; title from PDF title page (ebrary, viewed October 28, 2017).

OCLC:

1008968669