Vue Components
We can break down our website into manageable chunks with the help of Vue’s components.
Working with a Vue component that has its own logic and content allows us to work with it independently of the rest of the webpage.
A webpage frequently has a large number of Vue elements.
What are Components?
In order to create Vue apps that are more manageable and scalable, components are reusable, self-contained units of code that encapsulate a particular area of the user interface.
<Teleport> and <KeepAlive> are examples of built-in components that we will learn about later. Alternatively, we can create our own components in Vue. We will concentrate on our own-made components here.
Creating a Component
Vue’s components make our website more scalable and make handling larger projects easier, making it an incredibly powerful tool.
Let’s build a part and incorporate it into our endeavor.
- Create a new folder components inside the src folder.
- Make sure that FoodItem.vue is a new file in the components folder. Component names are often written using the PascalCase naming convention, which eliminates spaces and starts new words—including the first word—with a capital letter.
- Verify that the FoodItem.vue file appears as follows:
Code inside the FoodItem.vue component:
<template>
<div>
<h2>{{ name }}</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples'
}
}
};
</script>
<style></style>
Similar to our main App.vue file, components also include the <template>, <script>, and <style> tags. This is demonstrated in the example above.
Adding The Component
Observe that in the aforementioned example, the <script> tag begins with export default. This implies that it is possible to import, or receive, the object holding the data properties in another file. This will be used to import the FoodItem.vue component along with the main.js file into our current project.
First, in your original main.js file, modify the last line into two lines:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
Now, add the FoodItem.vue component to your main.js file by placing lines 4 and 7 there:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import FoodItem from './components/FoodItem.vue'
const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')
The component is introduced on line 7 so that our App.vue file’s <template> tag can use it as a custom tag <food-item/>, as shown here:
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style></style>
Let’s also add some styling to the App.vue file inside the <style> tag. Verify that the development server is up and functioning, then see the outcome.
Example
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style>
#app > div {
border: dashed black 1px;
display: inline-block;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>
Development mode: It’s helpful to keep your Vue projects in development mode at all times by running the following code line in the terminal:
Individual Components
One of Vue’s most helpful and potent features is that, unlike with simple JavaScript, we don’t need to mark items with unique IDs in order to make them act individually. Vue automatically makes sure that every component is handled separately.
Let’s add a click count to the <div> elements.
The sole addition made to our main application file, App.vue, is a CSS style that makes the cursor appear to be pointing with a hand when hovered over, suggesting that there may be click capability.
CSS code added to the <style> tag in App.vue:
#app > div:hover {
cursor: pointer;
}
We need to add a data property count, a click listener to the <div> element, a function to run when a click occurs to increment the counter, and text interpolation {{}} to display the count in our component file FoodItem.vue.
Example
FoodItem.vue:
<template>
<div v-on:click="countClicks">
<h2>{{ name }}</h2>
<p>{{ message }}</p>
<p id="red">You have clicked me {{ clicks }} times.</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples',
clicks: 0
}
},
methods: {
countClicks() {
this.clicks++;
}
}
}
</script>
<style>
#red {
font-weight: bold ;
color: rgb(144, 12, 12);
}
</style>
We don’t have to define unique IDs or do any extra work for Vue to handle the counting independently for each <div> element, Vue just does this automatically.
However, the content of the <div> components remains same, save for the variations in counter values. To help us use components in a more logical manner, we shall learn more about them on the following page. It would be more logical, for instance, to display various food types in each <div> element.
