Creating a simple Vue.js website for our backend
By: Nil Madhab
Tags: UI, Programming, Frontend, Vuejs, Web Development

Let’s make a website

All the important code can be found in the “src” folder. “src/main.js” is the main entry point for our project. “src/views” is where all our web pages can be found. “src/router” is where the logic for the router is initialized. “src/components” houses the something which is referred to as a “component”, Vue.js is very modular in its design and you can use components as a way of building a website with bits and pieces of reusable code. “src/assets” houses the assets, like pictures, of our website.

Now that we know what the important parts are we can start off by deleting the parts that we won’t be using. You can delete “src/components” since our website will be pretty basic. You can delete “src/views/About.vue” and “src/views/Home.vue”, we will be creating different pages altogether.

Next, let’s open “src/App.vue”. You can sort of think of this as the main wrapper of our website. Vue code tends to be structured in three parts. The first part is the “<template></template” part, this is the GUI (Guided User Interface) layout code or the HTML code, the second part is the “<script></script>” part, this is the logic part of our code, the last part is the “<style></style>” part, this is where we store the design part of our webpage. To start off with we will just replace the template part of “src/App.vue”:

<template>

<router-view/>

</template>

We just removed the navigation bar at the top of the screen to make it easier to work with. Next up we need to create three new files in “src/views”. The first file will be called “Login.vue” (“src/views/Login.vue”), the second file will be called “SignUp.vue” (“src/views/SignUp.vue”), the third file will be called “LogOut.vue” (“src/views/LogOut.vue”). Next, we need to create the scaffolding of each file, so let’s start off with “src/views/Login.vue”:

Let’s start off with explaining the template part:

h1: This is a header tag with a value of Login.

Next is the script part:

We need to export this view so that it can be accessed from other parts of our application. Technically speaking all .vue files are considered components, so I will be referring to them as such. We give our Login component a name of “Login”.

Finally the style part:

We give the body of our site a width of 80% so that it will have a bit of white space on both sides, it just makes our website look a bit neater. We state what font family to use, we give it some padding at the top and bottom, we set the font size, and remove the margin. CSS is a very complicated topic and I can’t even pretend to be a pro at it, so I will only be able to explain it to you at face value.

We stipulate the values for inputs, text areas, buttons, paragraphs, div’s, sections, articles and selects as having a display of block, a width of 100%, font-family of sans-serif, the font size of 1em, and a margin of 0.5em.

We also have a special class of “warning” which will be used to turn warning text’s color red.

The CSS will be the same across all the pages, that is why I covered it here.

Next up is “src/views/SignUp.vue” (this will almost be a copy of Login.vue):

The code is a lot similar to that of “src/views/Login.vue”, but with two differences. In the header tag (h1) we changed the text to “Sign Up” and we also changed the name of the component to “SignUp”.

The last page is “src/views/LogOut.vue”:

Again we just changed the header tag to say “Log Out” and we changed the name of the component to “LogOut”. With the foundations laid out before us we need to add these newly created pages (or components) to our router. So let’s edit “src/router/index.js”:

So we imported our Login, SignUp, and LogOut components, and then added a route to each one, and that’s all we changed in this file. The rest of this code was generated by the CLI. Now if you open your website you should see something like this:

If it doesn’t look like this then just check that your development server is still running (npm run serve).