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.
Publisher resources
Table of contents
-
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
- Customer Feedback
- Preface
- 1. Please Introduce Yourself – Tutorial
- 2. Under the Hood – Tutorial Explained
- 3. Let's Get Started
- 4. Let It Pomodoro!
- 5. Configuring Your Pomodoro
-
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
- 8. Let's Collaborate – Adding New Workouts Using Firebase Data Storage and Vue.js
- 9. Test Test and Test
- 10. Deploying Using Firebase
- Index
Product information
- Title: Vue.js 2 and Bootstrap 4 Web Development
- Author(s):
- Release date: September 2017
- Publisher(s): Packt Publishing
- ISBN: 9781788290920
You might also like
book
Full Stack Serverless
Cloud computing is typically associated with backend development and DevOps. But with the rise of serverless …
book
Head First Go
What will you learn from this book? Go makes it easy to build software that’s simple, …
book
Docker in Action, Second Edition
Docker in Action, Second Edition teaches you to create, deploy, and manage applications hosted in Docker …
book
Learning GraphQL
Why is GraphQL the most innovative technology for fetching data since Ajax? By providing a query …