Vue.js 2 and Bootstrap 4 Web Development by Filipova, Olga -- Read -- Imperial Library of Trantor

Index

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

← Prev
Back
Next →

← Prev
Back
Next →