How do Vue 2 functional components, `functional: true` or `<template functional>`, migrate to Vue 3, and should they stay functional?

## Why Vue 2 had functional components A **functional component** in Vue 2 was a component without an instance: no reactive state, no lifecycle, no `this`. It was declared either with `functional: true` and a `render(h, context)` function, or in an SFC with `<template functional>`. Teams used them for two reasons: - **Performance**: skipping instance creation made them noticeably cheaper to initialise, which mattered in long lists. - **Multiple root nodes**: a stateful Vue 2 component had to render exactly one root element, while a functional one could return several. ## What Vue 3 changed Both motives disappeared: - stateful components got fast enough that the migration guide calls the performance difference **negligible** in most use cases; - **every** component can now render multiple root nodes (fragments). So the guide's recommendation is to use stateful components as you normally would, keeping functional components only for simple cases such as a dynamic heading. And the Vue 2 syntaxes were removed: - the `functional` attribute on an SFC `<template>` is gone; - the `{ functional: true }` component option is gone. ## Migrating `<template functional>` SFCs The guide's path turns these into ordinary components: 1. Remove the `functional` attribute from `<template>`. 2. Rename `props` to `$props` and `attrs` to `$attrs` inside the template, or reference props directly. 3. Drop `v-on="listeners"`: listeners are now part of `$attrs`, so `v-bind="$attrs"` already forwards them. ```vue <!-- Vue 3: formerly <template functional> --> <template> <component :is="`h${$props.level}`" v-bind="$attrs" /> </template> <script> export default { props: ['level'] } </script> ``` ## Migrating `functional: true` render functions In Vue 3 a functional component is **just a function**: - it receives `props` and a `context` object containing `attrs`, `slots` and `emit`; - `h` is **imported from `vue`**, not passed in as the first argument of `render`; - declared props are attached as a `props` property on the function; without it, the `props` object holds every attribute, the same as `attrs`, and names are not normalised to camelCase. ```ts import { h } from 'vue' import type { FunctionalComponent } from 'vue' const DynamicHeading: FunctionalComponent<{ level: number }> = (props, { attrs, slots }) => h(`h${props.level}`, attrs, slots) DynamicHeading.props = ['level'] export default DynamicHeading ``` ## Common mistakes when converting - **Forgetting `.props`.** Without a `props` property, `props` simply mirrors `attrs`: names stay un-normalised (`heading-level` is not camelCased) and only `class`, `style` and `onXxx` listeners fall through to the root by default. - **Expecting `h` as a parameter.** Vue 2 passed `h` as the first argument of `render`; in Vue 3 the first argument is `props`, so code that calls its first parameter as a function breaks. - **Reading Vue 2 context fields.** The Vue 3 context holds `attrs`, `slots` and `emit`. Vue 2 fields such as `children`, `data`, `parent` and `listeners` do not exist; children arrive through `slots`, listeners through `attrs`. - **Converting stateful-looking code.** If the old component reached for `parent` or injections to behave like a stateful one, make it stateful rather than forcing it into the function form. ## Should it stay functional? | Keep it as a plain function when… | Convert to a stateful component when… | |---|---| | It is a tiny presentational wrapper with no state | It needs state, lifecycle hooks, `provide` or watchers | | Its render logic reads best as a function | It was functional only for Vue 2 speed or multiple roots | | You are comfortable with render functions | The team works mostly in `<template>` SFCs | For most Vue 2 libraries the honest outcome is that nearly every functional component becomes a normal SFC, which removes a second component style from the codebase. If you run the migration build, its `COMPONENT_FUNCTIONAL` warning flags each remaining one.