How to use stateless components in Vue.js

In this post, you’ll learn about functional components and find out how to use stateless components in your workflow in Vue.

Before you start

You will need the following in your PC:

• Node.js version 10.x and above installed. You can verify if you have this version of Node.js by running the command below in your terminal/command prompt:

node -v

• Visual Studio Code editor (or a similar code editor)
• Vue’s latest version installed globally on your machine
• Vue CLI 3.0 installed on your machine

To do this, uninstall the old CLI version first:

npm uninstall -g vue-cli

Next, install the new one:

npm install -g @vue/cli

• Download a Vue starter project here
• Unzip the downloaded project
• Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:

npm install

Introduction: what are states and instances?

A Vue application state is an object that determines the behaviors of a component. Vue application states dictate how the component renders or how dynamic it is.

Meanwhile, a Vue instance is a ViewModel that contains options including templates for presentation elements, elements to be mounted, methods, and lifecycle hooks when initialized.

Vue components

Components in Vue.js are usually reactive: in Vue.js, data objects can have a lot of options for concepts you can use, computed properties, methods, and watchers. Additionally, data objects re-render any time data values change.

By contrast, functional components do not hold state.

Functional components

Essentially, functional components are functions that have components of their own. Functional components do not have states or instances because they don’t keep or track state. Furthermore, you can’t access the construct within functional components.

Functional components were created for presentation. Functional components in Vue.js are similar to those in React.js. In Vue, developers can use functional components to build straight-forward, neat components easily by passing context.

Functional components syntax

From the official documentation, a functional component looks like this:

Vue.component('my-component', {
  functional: true,
  // Props are optional
  props: {
    // ...
  },
  // To compensate for the lack of an instance,
  // we are now provided a 2nd context argument.
  render: function (createElement, context) {
    // ...
  }
})

Creating a functional component

One key guideline to keep in mind when creating functional components is functional property. The functional property is specified either in the template section of your component or in the script section. The template section syntax looks something like this:

<template functional>
  <div> <h1> hello world</h1>
  </div>
</template>

You can specify scripts as a property like this:

export default {
  functional: true,
  render(createElement) {
    return createElement(
      "button", 'Click me'
    );
  }
};

Why are functional components important?

Functional components can be executed quickly because they have no state and do not go through the same initialization and re-rendering process as components or parts of the template on data value change.

Mostly, functional components are useful for presentation or for displaying a loop of items.

Demo

In this introductory demo, you’ll see both the single page component type demo with the Vue template and the render function type of functional components.

Single-page functional component

Open your Test.vue file and copy the code block below into the file:

<template functional>
  <div>
    <p v-for="brand in props.brands" :key="brand">{{brand}} </p>
  </div>
</template>
<script> 
export default {
  functional: true,
  name: 'Test',
  props: {
    brands: Array
  }
}
</script>

The functional indicator in both the script and the template shows that this is a functional component. Note that props can still be passed — they are the only data value that can be passed in functional components.

The temporal data props hold can also be looped through.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Open your app.vue file and copy the code block below into it:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here, you’ll see that the props reference is being used with a colon.

Run the application in the dev server with the following command:

npm run serve

The result in your browser should look like this:

Render functions approach

Functional components can also contain render functions.

Developers use render functions to create their own virtual DOM without using the Vue template.

Use a render function to create a new button under the cars list. Create a new file inside your project folder named example.js and copy the code block below into the file:

export default {
    functional: true,
    render(createElement, { children }) {
      return createElement("button", children);
    }
  };

This creates a render function in a functional component to show a button and uses the child node on the element as the button text.

Open your app.vue file and copy the code block below into the file:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
    <Example>
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Example from './Example'
export default {
  name: 'app',
  components: {
    Test, Example
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

If you run the application again, you’ll see that Find More Cars — the child node — is now the text for the button. The example component appears as a functional component upon inspection.

Adding click events

You can add click events on the components and include the method in your root component. However, you need the data object argument in your render function to access it.

Copy this in your example.js file:

export default {
    functional: true,
    render(createElement, { data, children }) {
      return createElement("button", data, children);
    }
  };

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
    <Example @click="callingFunction">
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Example from './Example'
export default {
  name: 'app',
  components: {
    Test, Example
  },
  methods: {
    callingFunction() {
      console.log("clicked");
    }
  }
}
</script>

In addition to the above example, there are other arguments you can use in your functional components listed in the official documentation.

Conclusion

This beginner’s guide to functional components can help you achieve quick presentation, display a loop of items, or display simple parts of your workflow that do not require a state.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps — start monitoring for free.