Simple and performant functional Vue.js components
Sometimes we don't need complex components, and in some cases we don't even need them to have a state on its own. That can be the case when building UI components that don't have much logic in it.
For cases like that, functional components can be very appropriated. They're stateless and instanceless, which means that it doesn't even have an instance on its own (so no way to call this.$emit
and such).
That makes them simple to reason about, faster and more lightweight.
The question is, when can I use a functional component? Easy: when they depend only on props.
As an example, the following component:
<template>
<div>
<p v-for="item in items" @click="$emit('item-clicked', item)">
{{ item }}
</p>
</div>
</template>
<script>
export default {
props: ["items"]
};
</script>
Could be written in a functional way as follows:
<template functional>
<div>
<p v-for="item in props.items" @click="props.itemClick(item);">
{{ item }}
</p>
</div>
</template>
Pay attention to the things that changed:
- Write
functional
in thetemplate
tag - Props are accessible via
props
- Since we don't have access to
$emit
, we can use a function as a prop. That's how the React community has done it the whole time and it worked pretty well. - No need for the
script
part
Do you want to see it in action? Check it out yourself in this CodeSandbox!
Related Articles
Naming Webpack Chunks on Lazy Loaded Routes in Vue.js
Learn in this micro tip how you can name webpack chunks generated by lazy loaded routes

Apr 19, 2020
Use Web Workers in your Vue.js Components for Max Performance
Learn how to get up to 20x performance improvement of Vue.js components that rely on heavy tasks so they render and load faster

Mar 31, 2020
Lazy load images using v-lazy-image Vue.js component
Learn to improve the web performance of your vue.js application

Apr 16, 2019
Sponsors
VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.