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".
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.
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.
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.
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.
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.
The login form
Next part will be to replace the boring login form from previous part with some form elements from Bulma.
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.
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".
You can go back to the browser and see how the log in form look now.
If you try to log in without typing anything in the fields, a beautiful error message will be presented under the form.
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.
I hope you enjoyed adding style and making the site prettier. If there is anything you want to ask you can leave a comment below.