Vue JS & Semantic UI: Design Cool Sign Up Form Faster
Designing a signup form from scratch in Vue.js can sometimes be hard, but with the help of the Semantic UI CSS framework, we can create forms not only fast but also look professional.
As you can see the sign-up form is centered on the browser viewport and it has a header and three input fields, as well as a button.
Part #1: Vue.js & Semantic UI: Design Cool Sign Up Form Faster (you’re here)
Part #2: Vue JS Form Validation Using Options API
I designed this with the combination of flexbox and the Semantic UI CSS framework.
WIthout further ado let’s go ahead and build this!
The first step is to create a Signup view and the route for it.
Recommended
Vue JS Form Validation Using Options API
Create a Signup Component And The Route For It.
The signup view is going to be the page based component, so create a file called SignUp.vue inside the page folder like so.
To show this component on the browser we need to create a route for it.
Go to the index.js file inside the router folder.
Import the SignUp Vue file at the top.
import SignUp from '@/pages/SignUp'Next, in here, create a new Javascript object inside the routes array which will have two properties:
- path
- component
{
path: '/signup',
component: SignUp
}The first property is the path which is where I am going to create the route URL for signup…in this case ‘/signup’.
Now I want to show the sign-up component when a user goes to the signup path.
So, assign the sign up variable to the component property.
This SignUp variable should be matched to the variable that we declared when importing the sign up component.
Let’s navigate to the URL on the browser – and it works as expected.
Perfect.
Install Semantic UI CSS Framework
The next step is to install a Semantic UI CSS framework for the project.
We can use Semantic UI CSS in two different ways:
- One is using the CDN format which is just grabbing the CSS link from the semantic website and pasting it in between the head tag in the index.html file.
- The second option is to use the Semantic UI NPM package.
I’m going to be using the second option to install the Semantic UI Framework.
This will be a two step process.
Let’s do the first step, which is installing the npm package into the project.
Open up the Terminal and navigate to the project folder if you are not already there.
Then run the following command:
npm i semantic-ui-cssOnce it’s done, the next step is to import it into the project.
Go to the main.js and add the following code before the vue instance.
import "semantic-ui-css/semantic.min.css"; Center The Sign-up Form
Next, I am going to center the form on the browser viewport horizontally and vertically.
In the SignUp Vue file, get rid of the h1 tags and create a section tag which will be the main container. As you know, all of the code will go inside this element.
Create a signup form container element inside here.
In there, create three Semantic UI CSS classes which are…UI segment and grey. UI and segment classes create nice thin rounded borders around the form container.
<template>
<section>
<div class="ui segment grey signup-form">
</div>
</section>
</template>
The grey class creates a thick grey border at the top of the container.
Then come down after the ending template tag and declare starting and ending style tags.
Then, give a sign up form container width to 450pxas well as center any text inside using the text-align property.
Let’s make it centered horizontally and vertically to the browser viewport using flex box.
As you know, the first thing we need to do is make sure the sign up form container’s parent element is in full screen. That is because in flex box, you add CSS rules to the parent element to position the child element.
Let’s stretch the parent’s element height, which is section, to the browser viewport height.
Add background color to light grey #ececec as well so we can see that it fits the screen.
<style>
section {
height: 100vh;
background-color: #ececec;
display: flex;
align-items: center;
justify-content: center;
}
.signup-form {
width: 450px;
text-align: center;
}
</style>
Now we can easily center the sign up form using just three flex box CSS rules to the section parent element.
The first one is:
display: flex;To center the form container vertically use the following CSS rule:
align-items:centerThen to center the form container horizontally use:
justify-content:center 
Create Header, Three Form Fields And A Submit Button
Let’s see how we are going to create markup for the sign up form.
Header
Declare an H2 element with two Semantic UI classes called ui header inside the signup form container.
<h2 class="ui header">CREATE ACCOUNT</h2>
Form
Next, create a form element with UI and form CSS classes. Also, I want the form to be large, so add the large class as well.
<form class="ui form large"></form>Now, create another div with UI and segment classes similar to the previous one which will create a rounded corner.
<div class="ui segment"></div>Then, add the stacked class which will have a few border lines at the bottom of the element.
Full Name Input Field
The first input field I want to create is for Full name. As you can see, the full name input field has an icon on the left.
Define a div with the field class which is a default container when creating an input field in the Semantic UI CSS framework.
Then, create another div with a few Semantic UI classes that will allow me to add an icon on the left side of the input field – ui left icon input. I find the normal size is small to me, so add class called big at the end.
At this stage, all we have to do is define the icon, in this case, user icon as well as the actual input field.
<div class="ui stacked segment">
<!-- FULL NAME -->
<div class="field">
<div class="ui left icon input big">
<i class="user icon"></i>
<input type="text" placeholder="Full Name" />
</div>
</div>
</div>As you can see, there is no label for the input field so the placeholder text will act as a label for the input field.
And it looks great!
You can actually look at all the available icons on the semantic website here.
Email Input Field
Similar to the previous one, create a div with field class as well as a div with ui left icon input big element inside.
Add the i element with a mail icon and the input element with a type of email.
<div class="ui stacked segment">
...
<!-- EMAIL -->
<div class="field">
<div class="ui left icon input big">
<i class="mail icon"></i>
<input type="email" placeholder="Email" />
</div>
</div>
</div>Password Input Field
Finally for the password input field.
<div class="ui stacked segment">
...
<!-- PASSWORD -->
<div class="field">
<div class="ui left icon input big">
<i class="lock icon"></i>
<input type="password" placeholder="Password" />
</div>
</div>
</div>At this stage, the form should look like this:
Sign Up Button
Next the signup button.
After the password wrapper div element that has a field class, declare a button with ui button classes.
<div class="ui stacked segment">
...
<!-- PASSWORD -->
<div class="field">
<div class="ui left icon input big">
<i class="lock icon"></i>
<input type="password" placeholder="Password" />
</div>
</div>
<button class="ui button big red fluid">SIGN UP</button>
</div>Here are some Semantic UI classes I used in the button:
- big: make the button size bigger
- fluid: stretch the button on both side to fill its parent div width
- red: change the button background color to red
And looks good!
Login Message Box
Normally when you’re in the sign up page, you’ll also see the login button.
Let’s add that.
Create a div after the ending form tag with three Semantic UI classes – ui message large like so.
<div class="ui stacked segment">
..
<form>
...
</form>
<div class="ui message large">
Already have an account?
<a>Log in</a>
</div>
</div>Inside the div tags, add “Already have an account? <a>Log in</a>”
And it’s looking great – even on the small screen!
Nice.
There you have it.
As you can see, using a few Semantic UI CSS classes, we can design a signup form not only faster but also one that looks professional in our Vue.js apps.
You can download a full source code here.