Building Vue Single Page Application (part 2)

 Creating a Vue component. 

This is a continuation of Tutorial from Part 1.

Part 1:

• This will build a Vue project with a component called Helloworld.
• Identify basic folder and files
• Know how to instantiate a Vue application
• Know the basic flow
• Know a basic Vue shorthand
• Be able to create string variable
• Be able to create custom function

Part 2:

• Know what is a component
• Be able to create a new component
• Be able to create an array variable
• Know how to display variables in a table format
• Know what is Bootstrap
• Be able to add Bootstrap
• Be able to create a Bootstrap navbar, navbar-brand, navbar-nav and form within navbar

1. Add and test a new component named Products

Create the file src/components/Products.vue and add the contents

<template>
  <div class="products">
      <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'Products',

  props: {
    msg: String
  }
}
</script>

Update the App.vue template with data and methods to be used in the component.

Replace <HelloWorld msg="

with 

<Products msg="

Replace import HelloWorld from './components/HelloWorld.vue'

with 

import Products from './components/Products.vue'

Apply changes and run

Add data and for loop

Edit <SCRIPT> content in src/components/Products.vue

export default {
  name: 'Products',
  props: {
    msg: String,
    products: Array,
  }
}

Edit <TEMPLATE> content in src/components/Products.vue

  <div class="products">

      <h1>{{ msg }}</h1>

      <table border=1>

      <thead>

        <tr>

          <th>Name</th>

          <th>Description</th>

          <th>Cost</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="product in products" :key="product.id">

          <td>{{ product.name }}</td>

          <td>{{ product.description }}</td>

          <td>{{ product.cost }}</td>

        </tr>

        </tbody>

    </table>

  </div>

Edit conponents data in src/App.vue

  data(){
    return {
      message: 'My Products',

      products: [
        {
          id: 1,
          name: "Leather shield",
          description: "Tough leather",
          cost: 120 },
        { id:2,
          name: "Heavy Leather shield",
          description: "Double leather layers",
          cost: 150 },
        ],
    }

Compile and run

2. Add Bootstrap support

Current Vue 3, will cause Bootstrap 5 to be installed.

npm install --save @popperjs/core bootstrap

Edit the file src/main.js to import the installed bootstrap.

import "bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

3. Create a navigation bar component

Lets use the example code from bootstrap. Create a new file src/components/Navigation.vue

Then add the following code

<template>

<div class="row">

<div class="NavbarPage hold-transition sidebar-mini layout-fixed">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <div class="container-fluid">

            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                <a class="nav-link active" aria-current="page" href="#">Home</a>

                </li>

                <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                    Dropdown

                </a>

                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

                    <li><a class="dropdown-item" href="#">Action</a></li>

                    <li><a class="dropdown-item" href="#">Another action</a></li>

                    <li><hr class="dropdown-divider"></li>

                    <li><a class="dropdown-item" href="#">Something else here</a></li>

                </ul>

                </li>

                <li class="nav-item">

                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

                </li>

            </ul>

            <form class="d-flex">

                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

                <button class="btn btn-outline-success" type="submit">Search</button>

            </form>

            </div>

        </div>

        </nav>

</div>

</div>

</template>

<script>

</script>

Next, edit src/App.vue can replave the DIV with ID=app to the following

<div id="app" class="container-fluid">  

  <NavbarRow />

Within the tag <script>, add this new component

import NavbarRow from './components/Navigation.vue'

Add this to the components list

components: {

     Products, NavbarRow,

  },

Compile and run.

Exercise:

1. Create a new component called Footer.vue and like its name, setup within App.vue to display your name and email as the page footer.

2. Describe how each of the modules are loaded through a drawing. 

3. Edit the menu item "Link" in the navigation bar to load a website of your preference.