4. Hello World

In this chapter, we will do the “Hello world” of our project. By “Hello world” we mean the basic setup of the front-end of the application. We will create our home page where we will simply create a header and footer which will be included on each page. And between them, we will have our home page.

Video tutorial:

First, open your web/src/App.vue file and replace the <template> tag with the following:

<template>
	<app-header />
		<router-view />
	<app-footer />
</template>

In the <script> tag, you can remove the HelloWorld line and also from the “components” object too.

Create a new folder named “layouts” inside your web/src/components folder. Inside this layouts folder, create 2 files:

  1. AppHeader.vue
  2. AppFooter.vue

“A” should be capitalized.

Then write the following lines to register these 2 files as Vue JS components:

import AppHeader from "./components/layouts/AppHeader.vue"
import AppFooter from "./components/layouts/AppFooter.vue"

export default {
	...

	components: {
		AppHeader,
		AppFooter,
	},
}

If you check your browser, you will see an empty page, because we haven’t added any code to our header and footer components.

Including Bootstrap

We will be using Bootstrap Darkly for our template design. You can download it from here: https://github.com/thomaspark/bootswatch/

After download, create a new folder named “assets” in your web/public directory. Here we will place all our CSS, JS, and image files. So create 2 separate folders named “css” and “js” inside this assets folder.

Extract the downloaded zip of the bootstrap darkly. In the extracted files, you will see a folder named “dist” and inside this, you will find the folder named “darkly”. Copy the “bootstrap.min.css” file and paste it into your web/public/assets/css folder you just created.

To properly use the bootstrap, you need to download the jQuery and Bootstrap JS files too. You can download the jQuery from here: https://code.jquery.com/jquery-3.1.1.js

And you can download the bootstrap JS from here: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js

Paste the jQuery and bootstrap JS files in the web/public/assets/js folder.

We will also be using font-awesome for icons. You can download font awesome from here: https://adnan-tech.com/download/font-awesome-4-7-0/

After download, you can paste the “font-awesome” folder directly inside the assets folder.

Now is the time to include them in our Vue JS app. Open your App.vue and write the following code in it:

import "../public/assets/css/bootstrap.min.css"
import "../public/assets/font-awesome/css/font-awesome.min.css"

import "../public/assets/js/jquery-3.1.1.js"
import "../public/assets/js/bootstrap.min.js"

Noticed the ../? This is because the App.vue is in the src folder, and we are taking one step back to go to the public folder.

If you get an error like “Can’t resolve jquery” or “Can’t resolve popper.js”, then run the following command:

> npm install popper.js jquery

Bootstrap 5

If you are working on bootstrap 5, you need to run the following command:

> npm install @popperjs/core

Sometimes, bootstrap JS files also cause some ESlint errors. To get rid of them, simply run the following command to uninstall ESlint:

> npm remove @vue/cli-plugin-eslint

Open the browser, you will see a black screen. Don’t worry, it means that bootstrap “darkly” has been included successfully.

Creating Header and Footer

We have already created our header and footer files. We just need to add the code to it. In the header, we will be creating navigation where we will display the login and registration link if a user is not logged in and the logout link if a user is logged-in.

First, open your web/src/components/layouts/AppHeader.vue, and in this file write the following code:

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="margin-bottom: 50px;">
        <div class="container-fluid">
        
            <router-link class="navbar-brand" to="/">
                Chat Station
            </router-link>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <router-link class="nav-link active" to="/">
                            Home
                            <span class="visually-hidden">(current)</span>
                        </router-link>
                    </li>

                    <li class="nav-item">
                        <router-link class="nav-link" to="/login">Login</router-link>
                    </li>

                    <li class="nav-item">
                        <router-link class="nav-link" to="/register">Register</router-link>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="javascript:void(0);">Logout</a></li>
                        </div>
                    </li>
                </ul>

                <form class="d-flex">
                    <input class="form-control me-sm-2" type="text" v-model="query" placeholder="Search">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</template>

<script>

    export default {
        //
    }
</script>

Save the file and open your browser. You will see a navigation bar with links to home, login, register, and a dropdown menu for logout. You will also see a search bar on the right.

navbar
navbar

You will notice an extra margin from the top. We need to remove it. Open your App.vue file and go to the <style> tag. Remove the #app styles and add the following code to it:

body {
  margin-top: 0px !important;
}

Now you will see it perfectly aligned to the top.

navbar 2
navbar

Similarly, open your AppFooter.vue file and add the following code to it:

<template>
    <footer style="padding: 25px;">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center text-white">
                    Copyright {{ year }}
                </div>
            </div>
        </div>
    </footer>
</template>

<script>
import { computed } from 'vue'

export default {
    setup() {
        const year = computed(function () {
            return new Date().getFullYear();
        });
        return { year };
    },
}
</script>

As soon as this component is set up, we will call the computed method from the Vue module and return the current full year (YYYY). So you do not have to update the year manually each year.

Now your output will be something like this:

footer
footer

Notice the copyright text at the bottom. All your other components will be rendered in between this header and footer.

Conclusion

In this chapter, you will learn how you can create a basic and simple Hello World application using the header and footer in Vue JS SPA. In upcoming chapters, we will be adding dynamic functionalities in it to Node JS API integration.