Vue.js 2 and Bootstrap 4 Web Development

Learn how to combine Bootstrap with Vue.js to build responsive web applications.
Preview in Mapt

Vue.js 2 and Bootstrap 4 Web Development

Olga Filipova

1 customer reviews
Learn how to combine Bootstrap with Vue.js to build responsive web applications.

Quick links: > What will you learn?> Table of content> Product reviews

Mapt Subscription
FREE
$29.99/m after trial
eBook
$5.00
RRP $35.99
Save 86%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$5.00
$44.99
$29.99 p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 14 Day Trial

Frequently bought together


Vue.js 2 and Bootstrap 4 Web Development Book Cover
Vue.js 2 and Bootstrap 4 Web Development
$ 35.99
$ 5.00
Bootstrap 4 - Responsive Web Design Book Cover
Bootstrap 4 - Responsive Web Design
$ 71.99
$ 5.00
Buy 2 for $10.00
Save $97.98
Add to Cart

Book Details

ISBN 139781788290920
Paperback310 pages

Book Description

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

Chapter 1: Please Introduce Yourself – Tutorial
Hello, user
Creating a project in the Firebase console
Scaffolding a Vue.js application
Adding a Bootstrap-powered markup
Making things functional with Vue.js
Deploying your application
Extra mile – connecting your Firebase project to a custom domain
Summary
Chapter 2: Under the Hood – Tutorial Explained
Vue.js
Bootstrap
Combining Vue.js and Bootstrap
What is Firebase?
Summary
Chapter 3: Let's Get Started
Stating the problem
Gathering requirements
Personas
User stories
Retrieving nouns and verbs
Mockups
Summary
Chapter 4: Let It Pomodoro!
Scaffolding the application
Defining ProFitOro components
Implementing the Pomodoro timer
Introducing workouts
Summary
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
Exercise
Summary
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
Summary
Chapter 7: Adding a Menu and Routing Functionality Using vue-router and Nuxt.js
Adding navigation using vue-router
Using Bootstrap navbar for navigation links
Code splitting or lazy loading
Server-side rendering
Nuxt.js
Summary
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
Using a Bootstrap modal to show each workout
It's time to apply some style
Summary
Chapter 9: Test Test and Test
Why is testing important?
What is Jest?
Getting started with Jest
Testing utility functions
Testing Vuex store with Jest
Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
Testing Vue components using Jest
Snapshot testing with Jest
Summary
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?
Summary

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

Authors

Table of Contents

Chapter 1: Please Introduce Yourself – Tutorial
Hello, user
Creating a project in the Firebase console
Scaffolding a Vue.js application
Adding a Bootstrap-powered markup
Making things functional with Vue.js
Deploying your application
Extra mile – connecting your Firebase project to a custom domain
Summary
Chapter 2: Under the Hood – Tutorial Explained
Vue.js
Bootstrap
Combining Vue.js and Bootstrap
What is Firebase?
Summary
Chapter 3: Let's Get Started
Stating the problem
Gathering requirements
Personas
User stories
Retrieving nouns and verbs
Mockups
Summary
Chapter 4: Let It Pomodoro!
Scaffolding the application
Defining ProFitOro components
Implementing the Pomodoro timer
Introducing workouts
Summary
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
Exercise
Summary
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
Summary
Chapter 7: Adding a Menu and Routing Functionality Using vue-router and Nuxt.js
Adding navigation using vue-router
Using Bootstrap navbar for navigation links
Code splitting or lazy loading
Server-side rendering
Nuxt.js
Summary
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
Using a Bootstrap modal to show each workout
It's time to apply some style
Summary
Chapter 9: Test Test and Test
Why is testing important?
What is Jest?
Getting started with Jest
Testing utility functions
Testing Vuex store with Jest
Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
Testing Vue components using Jest
Snapshot testing with Jest
Summary
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?
Summary

Book Details

ISBN 139781788290920
Paperback310 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Bootstrap 4 - Responsive Web Design Book Cover
Bootstrap 4 - Responsive Web Design
$ 71.99
$ 5.00
Web Development with MongoDB and Node - Third Edition Book Cover
Web Development with MongoDB and Node - Third Edition
$ 31.99
$ 5.00
Vue.js 2 Web Development Projects Book Cover
Vue.js 2 Web Development Projects
$ 35.99
$ 5.00
Web development with Vue.js 2 [Video] Book Cover
Web development with Vue.js 2 [Video]
$ 124.99
$ 5.00
Complete Bootstrap: Responsive Web Development with Bootstrap 4 Book Cover
Complete Bootstrap: Responsive Web Development with Bootstrap 4
$ 35.99
$ 5.00
Learn Bootstrap 4 Responsive Web Development [Video] Book Cover
Learn Bootstrap 4 Responsive Web Development [Video]
$ 49.99
$ 5.00