-
Book Overview & Buying
-
Table Of Contents
Vue.js 2 and Bootstrap 4 Web Development
By :
Our application consists of two main screens.
One of the screens is the so-called Landing page; this page consists of the following parts:
A logo
A tagline
An authentication section
A link to the application to be used without being registered
Schematically, this is how our components are positioned on the screen:

Landing page that contains logo, tagline, authentication section, and a link to the application
The second screen is the main application screen. This screen contains three parts:
A header
A footer
The content
The content part contains the Pomodoro timer. If the user is authenticated, it will contain settings, workouts, and statistics as well:

Main application's screen that contains header, footer, and content
Let's create a folder called components and subfolders called main, landing, and common for the corresponding sub-components.
Components for the landing and main pages will reside in the components folder; the remaining 11 components will be distributed between...