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-css

Once 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.

Continue Reading...