O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Vue.js 2 and Bootstrap 4 Web Development

Vue.js 2 and Bootstrap 4 Web Development

by Olga Filipova
Publisher: Packt Publishing
Release Date: September 2017
ISBN: 9781788290920
View table of contents
Start reading

Book Description

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 code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Vue.js 2 and Bootstrap 4 Web Development
    1. Table of Contents
    2. Vue.js 2 and Bootstrap 4 Web Development
    3. Credits
    4. About the Author
    5. Acknowledgments
    6. About the Reviewer
    7. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    8. Customer Feedback
    9. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    10. 1. Please Introduce Yourself – Tutorial
      1. Hello, user
      2. Creating a project in the Firebase console
        1. Adding a first entry to the Firebase application database
      3. Scaffolding a Vue.js application
        1. Connecting the Vue.js application to the Firebase project
      4. Adding a Bootstrap-powered markup
        1. Adding a form using Bootstrap
      5. Making things functional with Vue.js
        1. Adding utility functions to make things look nicer
          1. Exercise
        2. Extracting message cards to their own component
          1. Exercise
      6. Deploying your application
      7. Extra mile – connecting your Firebase project to a custom domain
      8. Summary
    11. 2. Under the Hood – Tutorial Explained
      1. Vue.js
        1. Vue project – getting started
          1. Including directly in script
          2. CDN
          3. NPM
          4. Vue-cli
        2. Vue directives
          1. Conditional rendering
          2. Text versus HTML
          3. Loops
          4. Binding data
          5. Handling events
        3. Vue components
        4. Exercise
        5. Vue router
        6. Vuex state management architecture
      2. Bootstrap
        1. Bootstrap components
        2. Bootstrap utilities
        3. Bootstrap layout
      3. Combining Vue.js and Bootstrap
        1. Exercise
        2. Combining Vue.js and Bootstrap continued
      4. What is Firebase?
      5. Summary
    12. 3. Let's Get Started
      1. Stating the problem
      2. Gathering requirements
      3. Personas
      4. User stories
      5. Retrieving nouns and verbs
        1. Nouns
        2. Verbs
      6. Mockups
        1. The first page – login and register
        2. The main page displaying the Pomodoro timer
        3. Workout during the break
        4. Settings
        5. Statistics
        6. Workouts
        7. Logo
      7. Summary
    13. 4. Let It Pomodoro!
      1. Scaffolding the application
      2. Defining ProFitOro components
        1. Exercise
      3. Implementing the Pomodoro timer
        1. SVG and trigonometry
          1. Exercise
        2. Implementing the countdown timer component
        3. Responsiveness and adaptiveness of the countdown timer using Bootstrap
        4. Countdown timer component – let's count down time!
          1. Exercise
        5. Pomodoro timer
          1. Exercise
      4. Introducing workouts
      5. Summary
    14. 5. Configuring Your Pomodoro
      1. Setting up a Vuex store
      2. Defining actions and mutations
      3. Setting up a Firebase project
      4. Connecting the Vuex store to the Firebase database
      5. Exercise
      6. Summary
    15. 6. Please Authenticate!
      1. AAA explained
      2. How does authentication work with Firebase?
      3. How to connect the Firebase authentication API to a web application
      4. Authenticating to the ProFitOro application
      5. Making the authentication UI great again
      6. Managing the anonymous user
      7. Personalizing the Pomodoro timer
      8. Updating a user's profile
      9. Summary
    16. 7. Adding a Menu and Routing Functionality Using vue-router and Nuxt.js
      1. Adding navigation using vue-router
        1. Exercise - restrict the navigation according to the authentication
      2. Using Bootstrap navbar for navigation links
      3. Code splitting or lazy loading
      4. Server-side rendering
      5. Nuxt.js
        1. Adding links with nuxt-link
        2. Exercise – making the menu button work
        3. Nuxt.js and Vuex store
        4. Nuxt.js middleware
        5. Exercise – finish 'em all!
      6. Summary
    17. 8. Let's Collaborate – Adding New Workouts Using Firebase Data Storage and Vue.js
      1. Creating layouts using Bootstrap classes
      2. Making the footer nice
      3. Storing new workouts using the Firebase real-time database
      4. Storing images using the Firebase data storage
        1. Let's search!
      5. Using a Bootstrap modal to show each workout
        1. Exercise
      6. It's time to apply some style
      7. Summary
    18. 9. Test Test and Test
      1. Why is testing important?
      2. What is Jest?
      3. Getting started with Jest
        1. Coverage
      4. Testing utility functions
        1. Mocking with Jest
      5. Testing Vuex store with Jest
        1. Testing mutations
        2. Asynchronous testing with Jest – testing actions
      6. Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components
      7. Testing Vue components using Jest
      8. Snapshot testing with Jest
      9. Summary
    19. 10. Deploying Using Firebase
      1. Deploying from your local machine
      2. Setting up CI/CD using CircleCI
      3. Setting up staging and production environments
      4. What have we achieved?
      5. Summary
    20. Index