Use light-weight functional components if you want stateless components.

Components consist of many different parts in Vue -

• Data
• computed properties
• methods
• etc.

Data property in particular stores states of the component, and enables the component to react to prop changes by keeping track of all that the component has to go through.

What if you want no states? For e.g. you have a ‘Contact Service’ component that is statically displayed as an icon on the main page, or a footer component that takes in a prop and displays its value.

In these cases, you can create a lighter version of the regular Vue component that is fast and joyful. This is called “functional components” in Vue.

You create the functional component like so -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template functional>
  <div>
    <p class="title">
      Function is my name, speed is my game.
    </p>
    <p class="h3">
      {{ message }}
    </p>
  </div>
</template>

<script>
  export default {
    props: ["message"]
  };
</script>

A functional component has “functional” tagged against template and has -

• access to event props and $emit
• no access to states and no ways of storing values by itself - no stores, no router and no window object