Build a YouTube bookmarking site - part four - Implementing Bulma

It's time to add a little bit style to our site, and to do that, we are going to use a CSS framework called Bulma.

Installing Bulma

Let's begin by starting Vue UI by running, "vue ui" in our console. Click on "Dependencies" in the right menu, and then "Install dependency".

VueTube - Install Bulma

Type "Bulma" in the search field, and select the first item in the search result. Then you can continue by clicking "Install Bulma" in the lower right corner.

VueTube - Search

Run our project from the UI

Previously we have run the project by running "npm run serve" in the console. But the new user interface has the possibility to run a project by clicking a button. Click on "Tasks" in the right menu, and then select "serve" in the list. When you have done that you can see a dashboard showing a little bit information about what it's doing. Click "Run task" to start the server.

VueTube - Run task

Importing Bulma

Bulma is installed as a dependency in our project, but we still need to import the CSS files. Open "app.vue" in your editor, and add the import line you'll see at the top here.

VueTube - Import Bulma

Finally Bulma is fully integrated in our app, and we can start adding some elements from Vue.

The navigation bar

We can continue in "App.vue". First we are going to replace the four links in <nav id="nav"> with the code here.

VueTube - Navigation bar

The nav is wrapper in a <nav>-element. On the left side of the menu we'll just print "VueTube". On line 16, we have added one more element which will contain the two menus. One menu to the left for navigation, and one menu to the right for authentication.

If you go to the browser now, the site should look something like this.

VueTube - Preview

The login form

Next part will be to replace the boring login form from previous part with some form elements from Bulma.

VueTube - Login form

The code here should be pretty straight forward. We are also doing one more cool thing, and that is to show a error message instead of presenting it in an alert.

On line 25, we have added an article element. This element will only be rendered if there is an error. In order for this to work, we need to add the "error"-variable to the data array.

VueTube - Error

And the last thing we need to do is to replace the alert message, with this code. So instead of the alert we are now using "this.error = error.message".

VueTube - Error message

You can go back to the browser and see how the log in form look now.

VueTube - Log in

If you try to log in without typing anything in the fields, a beautiful error message will be presented under the form.

VueTube - Log in, error

Sign up form

We can do the exact same changes to the SignUp.vue file as we did to the LogIn.vue. When you're finished with this, we are finished with this part of the course.

Summary

I hope you enjoyed adding style and making the site prettier. If there is anything you want to ask you can find Vue Hero at Facebook


PreviousNext

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.