Book Image

Vue.js 2 and Bootstrap 4 Web Development

Book Image

Vue.js 2 and Bootstrap 4 Web Development

Overview of this book

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.
Table of Contents (19 chapters)
Vue.js 2 and Bootstrap 4 Web Development
Credits
About the Author
Acknowledgments
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface
Index

Index

A

  • accounting
    • about / AAA explained
  • actions
    • defining / Defining actions and mutations
  • alert component
    • reference / Combining Vue.js and Bootstrap continued
  • anonymous user
    • managing / Managing the anonymous user
  • application
    • deploying / Deploying your application
    • scaffolding / Scaffolding the application
  • asynchronous testing
    • Jest, using / Asynchronous testing with Jest – testing actions
  • auth / AAA explained
  • authentication
    • about / AAA explained
    • working, with Firebase / How does authentication work with Firebase?
  • authentication, Firebase documentation
    • reference / Updating a user's profile
  • authentication API, Firebase
    • reference / How to connect the Firebase authentication API to a web application
  • authentication UI
    • enhancing / Making the authentication UI great again
  • authorization
    • about / AAA explained

B

  • Bootstrap
    • used, for adding form / Adding a form using Bootstrap
    • about / Bootstrap
    • reference / Bootstrap
    • functionalities / Bootstrap
    • components / Bootstrap components
    • utilities / Bootstrap utilities
    • layout / Bootstrap layout
    • Vue.js, combining with / Combining Vue.js and Bootstrap, Combining Vue.js and Bootstrap continued
    • used, for checking responsiveness of countdown timer component / Responsiveness and adaptiveness of the countdown timer using Bootstrap
    • used, for checking adaptiveness of countdown timer component / Responsiveness and adaptiveness of the countdown timer using Bootstrap
  • Bootstrap-powered markup
    • adding / Adding a Bootstrap-powered markup
  • Bootstrap-Vue
    • reference / Combining Vue.js and Bootstrap continued
  • Bootstrap classes
    • used, for creating layouts / Creating layouts using Bootstrap classes
  • Bootstrap modal
    • used, for displaying workout / Using a Bootstrap modal to show each workout, Exercise
    • reference / Using a Bootstrap modal to show each workout
  • Bootstrap navbar
    • using, for navigation links / Using Bootstrap navbar for navigation links
  • buttons
    • reference / Countdown timer component – let's count down time!

C

  • CamelCased / Defining ProFitOro components
  • Card Bootstrap's component
    • reference / Combining Vue.js and Bootstrap
  • cards, Bootstrap documentation
    • reference / Adding a Bootstrap-powered markup
  • CI/CD
    • setting up, Circle CI used / Setting up CI/CD using CircleCI
  • Circle CI
    • used, for setting up CI/CD / Setting up CI/CD using CircleCI
  • CircleCI
    • reference / Setting up CI/CD using CircleCI, Setting up staging and production environments
  • classes for alignment, Bootstrap
    • reference / Managing the anonymous user
  • code splitting / Code splitting or lazy loading
  • components
    • message cards, extracting to / Extracting message cards to their own component
  • components, Bootstrap / Bootstrap components
  • components, Vue / Vue components
  • countdown timer component
    • responsiveness / Responsiveness and adaptiveness of the countdown timer using Bootstrap
    • adaptiveness / Responsiveness and adaptiveness of the countdown timer using Bootstrap
    • down time, counting / Countdown timer component – let's count down time!
  • custom domain
    • Firebase project, connecting to / Extra mile – connecting your Firebase project to a custom domain
  • custom templates, vue-cli
    • reference / Vue-cli

D

  • database entry
    • adding, to Firebase application database / Adding a first entry to the Firebase application database

E

  • element / Vue.js

F

  • file uploading
    • reference / Storing images using the Firebase data storage
  • Firebase
    • about / Creating a project in the Firebase console, What is Firebase?
    • services / What is Firebase?
  • Firebase API documentation
    • reference / Storing images using the Firebase data storage
  • Firebase application database
    • database entry, adding / Adding a first entry to the Firebase application database
  • Firebase authentication API
    • workflow / How does authentication work with Firebase?
    • connecting, to web application / How to connect the Firebase authentication API to a web application
  • Firebase console
    • project, creating in / Creating a project in the Firebase console
    • reference / Creating a project in the Firebase console, Setting up a Firebase project
  • Firebase database
    • Vuex store, connecting to / Connecting the Vuex store to the Firebase database
  • Firebase data storage
    • used, for storing images / Storing images using the Firebase data storage, Let's search!
  • Firebase project
    • Vue.js application, connecting to / Connecting the Vue.js application to the Firebase project
    • connecting, to custom domain / Extra mile – connecting your Firebase project to a custom domain
    • setting up / Setting up a Firebase project
  • Firebase real-time database
    • used, for storing workouts / Storing new workouts using the Firebase real-time database
    • documentation, reference / Storing new workouts using the Firebase real-time database
  • Firebase real-time database documentation
    • reference / Connecting the Vuex store to the Firebase database
  • Firebase SDK
    • password based authentication / How does authentication work with Firebase?
    • email based authentication / How does authentication work with Firebase?
    • federated entity provider authentication / How does authentication work with Firebase?
    • phone number authentication / How does authentication work with Firebase?
    • custom auth system integration / How does authentication work with Firebase?
    • anonymous user authentication / How does authentication work with Firebase?
  • flex-box
    • reference / Bootstrap utilities
  • footer
    • customizing / Making the footer nice
  • form
    • adding, Bootstrap used / Adding a form using Bootstrap
  • forms, Bootstrap documentation
    • reference / Adding a form using Bootstrap
  • functionalities, Bootstrap
    • references / Bootstrap
  • functional requirements
    • gathering / Gathering requirements

G

  • GoDaddy
    • reference / Extra mile – connecting your Firebase project to a custom domain
  • Google Firebase
    • reference / Deploying from your local machine

H

  • Heroku
    • reference / Deploying from your local machine
  • History API
    • reference / Vue router
  • Human-Computer Interaction (HCI)
    • about / Mockups

I

  • images
    • storing, Firebase data storage used / Storing images using the Firebase data storage, Let's search!

J

  • Jest
    • about / What is Jest?
    • reference / What is Jest?
    • using / Getting started with Jest
    • coverage / Coverage
    • mocking with / Mocking with Jest
    • mocking, reference / Mocking with Jest
    • documentation, reference / Mocking with Jest
    • used, for testing Vuex store / Testing Vuex store with Jest
    • asynchronous testing / Asynchronous testing with Jest – testing actions
    • working, with Vuex / Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
    • working, with Vue components / Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
    • working, with Nuxt.js / Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
    • working, with Firebase / Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
    • used, for testing Vue components / Testing Vue components using Jest
    • used, for snapshot testing / Snapshot testing with Jest
  • jest.mock function
    • reference / Asynchronous testing with Jest – testing actions
  • Jest spies
    • reference / Asynchronous testing with Jest – testing actions
  • jumbotrons
    • reference / Introducing workouts

K

  • KebabCased / Defining ProFitOro components

L

  • layouts
    • creating, Bootstrap classes used / Creating layouts using Bootstrap classes
  • lazy loading
    • about / Code splitting or lazy loading
    • reference / Code splitting or lazy loading
  • local machine
    • deploying from / Deploying from your local machine

M

  • menu button
    • working / Exercise – making the menu button work
  • message cards
    • extracting, to components / Extracting message cards to their own component
  • mock / Mocking with Jest
  • mocking functions
    • reference / Asynchronous testing with Jest – testing actions
  • mockups
    • about / Mockups
    • login page / The first page – login and register
    • Pomodoro timer, displaying / The main page displaying the Pomodoro timer
    • workout, during break / Workout during the break
    • Settings area / Settings
    • statistics / Statistics
    • workouts / Workouts
    • logo / Logo
  • mode* history option
    • reference / Vue router
  • Moment.js library
    • reference / Adding utility functions to make things look nicer
  • moment.js library
    • reference / Exercise
  • mutations
    • defining / Defining actions and mutations
  • mutations, Vuex store
    • reference / Vuex state management architecture

N

  • navbar component
    • reference / Using Bootstrap navbar for navigation links
  • navigation
    • adding, vue-router used / Adding navigation using vue-router
    • restricting, according to authentication / Exercise - restrict the navigation according to the authentication
  • navigation links
    • Bootstrap navbar, using / Using Bootstrap navbar for navigation links
  • nouns
    • retrieving / Nouns
  • npm package
    • reference / Storing images using the Firebase data storage
  • nuxt-link
    • used, for adding links / Adding links with nuxt-link
  • nuxt-starter template
    • about / Nuxt.js
    • reference / Nuxt.js
  • Nuxt.js
    • about / Nuxt.js
    • URL / Nuxt.js
    • and Vuex store / Nuxt.js and Vuex store
  • Nuxt.js middleware / Nuxt.js middleware

O

  • offsetting columns
    • reference / Responsiveness and adaptiveness of the countdown timer using Bootstrap
  • one-way data binding / Vue.js

P

  • path SVG element
    • reference / SVG and trigonometry
  • personas / Personas
  • please introduce yourself page
    • reference / Hello, user
    • about / Hello, user
  • Pomodoro technique
    • reference / Stating the problem
  • Pomodoro timer
    • main principles / Stating the problem
    • implementing / Implementing the Pomodoro timer
    • SVG and trigonometry / SVG and trigonometry, Exercise
    • countdown timer component, implementing / Implementing the countdown timer component
    • about / Pomodoro timer, Exercise
    • personalizing / Personalizing the Pomodoro timer
  • prerender-spa-plugin
    • reference / Server-side rendering
  • problem
    • stating / Stating the problem
  • profitoro
    • reference / Setting up CI/CD using CircleCI
  • ProFitOro application
    • authenticating to / Authenticating to the ProFitOro application
  • ProFitOro components
    • defining / Defining ProFitOro components
  • project
    • creating, in Firebase console / Creating a project in the Firebase console
  • pull-* class
    • reference / Responsiveness and adaptiveness of the countdown timer using Bootstrap
  • push-* class
    • reference / Responsiveness and adaptiveness of the countdown timer using Bootstrap

R

  • responsive application
    • about / What have we achieved?
  • router-view component
    • reference / Vue router

S

  • server-side renderign (SSSR)
    • about / Server-side rendering
    • reference / Server-side rendering
  • services, Firebase
    • authentication / What is Firebase?
    • database / What is Firebase?
    • hosting / What is Firebase?
    • storage / What is Firebase?
  • Single Page Applications (SPA) / Vue router
  • snapshot testing
    • Jest, using / Snapshot testing with Jest
    • reference / Snapshot testing with Jest
  • staging and production environments
    • setting up / Setting up staging and production environments
  • style
    • applying / It's time to apply some style

T

  • template literals
    • reference / Countdown timer component – let's count down time!
  • templates, vue-cli
    • webpack / Vue-cli
    • webpack-simple / Vue-cli
    • browserify / Vue-cli
    • browserify-simple / Vue-cli
    • simple / Vue-cli
  • testing
    • importance / Why is testing important?
  • theVue documentation
    • reference / Exercise
  • two-way data binding / Vue.js

U

  • Unified Modeling Language (UML) / Retrieving nouns and verbs
  • user profile
    • updating / Updating a user's profile
  • user stories / User stories
  • utility functions
    • testing / Testing utility functions

V

  • v-on directive
    • reference / Countdown timer component – let's count down time!
  • verbs
    • retrieving / Verbs
  • Vue
    • components / Vue components
  • vue-cli
    • about / Vue-cli
    • reference / Vue-cli, Scaffolding the application
  • vue-router
    • used, for adding navigation / Adding navigation using vue-router
    • reference / Using Bootstrap navbar for navigation links
  • vue-router library
    • reference / Vue router
  • Vue.js
    • functionalities, adding / Making things functional with Vue.js
    • utility functions, adding / Adding utility functions to make things look nicer
    • about / Vue.js
    • reference / Vue.js, Setting up CI/CD using CircleCI
    • including, in script / Including directly in script
    • combining, with Bootstrap / Combining Vue.js and Bootstrap, Combining Vue.js and Bootstrap continued
  • Vue.js application
    • scaffolding / Scaffolding a Vue.js application
    • connecting, to Firebase project / Connecting the Vue.js application to the Firebase project
  • Vue application
    • URL / Server-side rendering
  • Vue components
    • testing, with Jest / Testing Vue components using Jest
  • Vue directives
    • about / Vue directives
    • conditional rendering / Conditional rendering
    • text, versus HTML / Text versus HTML
    • loops / Loops
    • data, binding / Binding data
    • events, handling / Handling events
  • Vue documentation
    • reference / Scaffolding a Vue.js application
  • vuefire wrapper
    • reference / What is Firebase?
  • Vue instance / Vue.js
  • Vue project
    • about / Vue project – getting started
    • CDN version, using / CDN
    • npm dependency, adding to package.json file / NPM
  • Vue router / Vue router
  • Vuex
    • reference, for modules / Setting up a Vuex store
  • Vuexfire
    • reference / Connecting the Vuex store to the Firebase database
  • Vuex state management architecture / Vuex state management architecture
  • Vuex store
    • state / Vuex state management architecture, Setting up a Vuex store
    • getters / Vuex state management architecture, Setting up a Vuex store
    • mutations / Vuex state management architecture, Setting up a Vuex store
    • setting up / Setting up a Vuex store
    • actions / Setting up a Vuex store
    • connecting, to Firebase database / Connecting the Vuex store to the Firebase database
    • reference / Nuxt.js and Vuex store
    • testing, Jest used / Testing Vuex store with Jest
    • testing, mutations / Testing mutations
    • testing, actions / Asynchronous testing with Jest – testing actions

W

  • watchers
    • reference / Exercise
  • web application
    • Firebase authentication API, connecting to / How to connect the Firebase authentication API to a web application
  • webpack documentation
    • reference / Code splitting or lazy loading
  • WireframeSketcher
    • reference / Mockups
  • workout
    • storing, with Firebase real-time database / Storing new workouts using the Firebase real-time database
    • displaying, with Bootstrap modal / Using a Bootstrap modal to show each workout, Exercise
  • workouts
    • about / Introducing workouts