Book Image

Creating Interfaces with Bulma

By : Jeremy Thomas, Oleksii Potiekhin, Mikko Lauhakari, Aslam Shah, Dave Berning
Book Image

Creating Interfaces with Bulma

By: Jeremy Thomas, Oleksii Potiekhin, Mikko Lauhakari, Aslam Shah, Dave Berning

Overview of this book

Bulma is a lightweight configurable CSS framework that handles all the hard work of Flexbox for you. Bulma makes creating web interfaces an easy and interesting job. This book begins with an overview of the basics of Bulma ? its terms and its concepts. Then, while designing a login page for your application, you’ll learn how to use the various tools provided by Bulma to create HTML forms and control their layout and flow. In the later chapters, you’ll design an admin area for your application, thus learning to use Bulma’s navigation and menu components. You will also add the components to your user interface for common things such as boxes, lists, and media groups, and then create pagination. As you progress through the book, you’ll create and layout some other components for your interface, including tables, design dropdown lists, and finally to integrate your web application with JavaScript. By the end of this book, you’ll be able to use the features of Bulma to your advantage and build web interfaces quickly and easily.
Table of Contents (15 chapters)
8
8. Creating more tables and selecting dropdowns

First Vue template: Login page

In this chapter we take the code from the login.html page and convert that into a Vue component, or page if you will. Here it is a page, but technically each page is just another Vue component. Let’s get started.

Open up your login.html file and copy over everything inside the <body></body> tags into the <template><template>part of the login.vue file. If you visit your /login route, you should now see the same page as your static version. Let’s make this page a bit more interactive with Vue.

You might have noticed that the header and side navigation are visible, which they shouldn’t be. This is because you use App.vue as a base for the admin app. For tutorial purposes, we can make an easy fix for this. You should not do this for production code. What you need to do is wrap your <nav> and <section> with a <template> tag and a check if you are on the login page. To accomplish the latter, you can...