Setting up Vue 3 Components, How to Use them, and Other Tips!

Table of Contents

Introduction

What is a Vue Component?

Format of Vue Components

Things to watch out for!

Conclusion

Introduction

This is a guide to the inner workings of Vue Components and their usage. It will tell you how to set them up, what the file format is, and also give general advice and things to watch out for. This guide assumes the reader has basic knowledge of HTML/CSS, as well as Javascript.

If you have no knowledge of Vue or how to set up a Vue project, it is imperative that you follow Vue’s Quick Start instructions for doing so.

What is a Vue Component? Why should I care?

The Vue.js framework is a Javascript component-based programming model for the development of User Interfaces (UI), and is commonly used for Web Applications. It builds on the syntax of HTML, allowing the user to “declaratively” describe what they want the code to do. This allows for a very reactive app, one that responds efficiently to state changes to update the DOM. What this means is, less work needs to be done by the programmer for the HTML to update.

Components are how it’s all done. Every .vue file is a Vue Component! In these files, you can condense the 3 key aspects of a webpage, the HTML, code-behind, and CSS styling. This centralization and user-friendliness has made Vue renowned for its simplicity.

Format of Vue Components

Here is the general format of a Vue Component.

# Example code of a number that increments when clicked
<script setup>
var count = ref(0)
</script>

<template>
  <button @click="count++">Count is: 8</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

Thankfully, the order of these 3 key aspects in the file doesn’t matter. Let’s go each by each.

HTML Template

Ever seen the HTML of a webpage? That and Vue’s HTML template are almost identical. Just remember, the root container must be labelled as <template>, and it can only have one container inside that. Inside that sub-container though, anything is possible! On top of things like your standard <div>, you can also use other Vue Components that you’ve imported in the script section!

But that’s not all. Every component in Vue has funny little properties. Two of the most useful and important are the visibility property, and the for-loop property. Let’s take a look at both in action, eh?

<div v-if="this.pizza" class="pizza">
    <div
    v-for="(p, pIndex) in this.pizza"
    :key="pIndex"
    class="topping"
    >
        
        Toppings: 
        Toppings: 
        Size: 
        
        </PizzaSauce :sauce="alfredo">
    </div>
</div>

<div v-else class="pizza">
Oops, no pizza!
</div>

The v-if attribute needs a boolean value to determine if this component will display. Here it was reliant on the document variable this.pizza, an array of Objects, not being empty. On the same level as that component, you can include one with a v-else attribute so that something is displayed alternatively.

The component within the first one is of the for-loop type. Here, it’ll cycle through the this.pizza array and print all the toppings attributes successively, either using a list index (ex. this.pizza[pIndex].toppings), or just the sub-list item itself (ex. p.toppings). At the end of it, it also displays an imported Component known as PizzaSauce, which just contains a string passed to it that says “Alfredo”. More on that in a moment.

The syntax is a bit different from Javascript, so you can choose between v-for="item in array" or v-for="(item, index) in array", as long as you use the :key attribute to distinguish the index. This allows you to use both variables locally inside that for-loop.

CSS

Let’s take a magnifying glass to that style section.

<style scoped>
button {
  font-weight: bold;
}
</style>

The CSS styling in Vue works as it does anywhere else, but with one key difference. See that scoped attribute in the <style> tag? When the tag has that attribute, the CSS can only apply to the component it’s present in. Removing it however, allows for usage anywhere else in the program. Just…be careful about CSS conflicts and shadowing.

Script

This is the meat of Vue, where you essentially define the webpage as an Object-Oriented-Programming Class! It can have it’s own methods, attributes, as well as import scripts and other components for use! It’s a very dense part of learning Vue, so let’s do a general example by adding complementary code to the above HTML example.

import PizzaSauce from "./PizzaSauce.vue"

export default {
  components: {
    PizzaSauce,
  },
  
data() {
    return {
      pizza: [],
      restaurant: "Domino's"
    };
  },
  
  props: {
    size: {
      type: String
    }
  },

  mounted() {
    console.log("Pizza party started");
    const firstPizza = {toppings: "Pepperoni, Cheese", bread: "Stuffed Crust"};
    this.pizza.push(firstPizza);
  },

  methods: {
      printPizzaCheer() {
          return "Yay pizza!";
      }
  }

In export default{}, we can list a variety of helpful tools. Let’s go through them bit by bit.

Remember, all of these are arrays.

Things to watch out for!

Vue’s reactivity and unique way of handling things can prove to be a double-edged sword if not handled properly. Here are some general tips: