Vue.js 2 and Bootstrap 4 web development build Responsive SPAs with Bootstrap 4, Vue.js 2, and Firebase
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...
| Other Authors: | |
|---|---|
| Format: | eBook |
| Language: | Inglés |
| Published: |
Birmingham, England ; Mumbai, [India] :
Packt Publishing
2017.
|
| Edition: | 1st edition |
| Subjects: | |
| See on Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630683406719 |
Table of Contents:
- Cover
- Copyright
- Credits
- About the Author
- Acknowledgments
- About the Reviewer
- www.PacktPub.com
- Customer Feedback
- Table of Contents
- Preface
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- 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
- 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
- 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
- Let's search!
- Using a Bootstrap modal to show each workout
- Exercise
- 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
- 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
- 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
- Index.
