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.
