Vue 3 Programmatic Component Design

Create dynamic component templates

Vue 3 Programmatic Component Design

If you ever have used any design-system library, there is a common component each of them provides related to Typography. It would provide a prop where you define the tag line as or variant. And the next thing you see is it renders the element you defined in the prop.

This pattern is often referred to as creating component instances programmatically. This helps us create a component that removes conditional template rendering and increases reusability as it is flexible.

Let’s convert the below code to a custom Typography component that is flexible and the template is generated dynamically.

<template>
<h1 v-if="$props.as === 'h1'" :class="classes" :style="$props.style">
 <slot></slot>
</h1>
<h2 v-if="$props.as === 'h2'" :class="classes" :style="$props.style">
 <slot></slot>
</h2>
<p v-if="$props.as === 'p'" :class="classes" :style="$props.style">
 <slot></slot>
</p>
</template>

Note: I will be covering both function and stateful style for you to decide what you would like to go with.

Functional Component Pattern

This uses the render function, part of the options API, to render the component. This will require you to know about component instance properties to write better code. And tbh you will be impacting the code readability significantly with functional components.

In Vue2 functional components were a way to increase performance and reduce re-renders, but with Vue3 as per the official docs the performance between functional and stateful components is negligible, so it is recommended to use stateful components is possible.

Let’s look at the component and break it down:

<script lang="ts">
import { computed, CSSProperties, defineComponent, h, PropType } from "vue";
export default defineComponent({
name: "TypographyFunctional",
props: {
as: {type: String as PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p">, default: "p"},
style: { type: String as PropType<CSSProperties>, default:()=>{})},
class: {type: String,default: ""},
fontWeight: {type: String as PropType<"bold" | "light">,default:"light"}},
setup(props) {
const classes = computed(() => {
return `${props.fontWeight==="light"? "light" : "bold"} ${props.class}`;});
return { classes };
},
render() {
 return h(this.as,
  { class: this.classes, style: this.style,},
  this.$slots.default?.()
 );
},
});
</script>

So, let’s understand the h function which is also referred to as the createElement function. It takes in the following arguments:

1. tag name: it can be either a string, object, function. In the above example, it is prop.as, and I am using a string to define the element type.
2. props: this is an object, which is used to define the attributes, props, and events for that element. In the above example, it's the props.style and classes which is a computed value.
3. children: these are the VNodes that can be used to add child nodes to the element. In the above case is the default slot (this.$slots.default?.() is an instance property)

With this, we can now programmatically create a custom Typography component. Let’s look at an example to see how it looks in working:

<template>
<TypographyFunctionalVue :as="'h1'" class="border margin" 
:font-weight="'bold'" :style="{ color: 'green' }">
This is a functional component
</TypographyFunctionalVue>
<TypographyFunctionalVue :as="'h2'" class="border margin" 
:font-weight="'bold'" :style="{ color: 'green' }">
This is a functional component
</TypographyFunctionalVue>
<TypographyFunctionalVue :as="'h3'" class="border margin" 
:font-weight="'bold'" :style="{ color: 'green' }">
This is a functional component
</TypographyFunctionalVue>
<TypographyFunctionalVue :as="'h4'" class="border margin" 
:font-weight="'bold'" :style="{ color: 'green' }">
This is a functional component
</TypographyFunctionalVue>
<TypographyFunctionalVue :as="'h5'" class="border margin" 
:font-weight="'bold'" :style="{ color: 'green' }">
This is a functional component
</TypographyFunctionalVue>
<TypographyFunctionalVue class="border margin" 
:font-weight="'bold'" :style="{ color: 'green' }">
This is a functional component
</TypographyFunctionalVue>
</template>

rendered HTML

Stateful Component Pattern

This relies on the component element which is provided by Vue and its very special directives is.

<component is="tag-name"></component>

The component can be thought of as a dynamic placeholder element in your template. In order to use its full power we need to define the is directive, it takes in two types of input String or Object(for custom Vue component). We can render both HTML elements like h1,h2, li, and custom components dynamically based on conditions or in our case as a prop.

Let’s look at the component and break it down:

<template>
 <component :is="$props.as" :class="classes" :style="$props.style"
  <slot></slot>
 </component>
</template>
<script lang="ts">
import { computed, CSSProperties, defineComponent, h, PropType } from "vue";
export default defineComponent({
 name: "Typography",
 props: {
as: {type: String as PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p">, default: "p"},
style: { type: String as PropType<CSSProperties>, default:()=>{})},
class: {type: String,default: ""},
fontWeight: {type: String as PropType<"bold" | "light">,default:"light"}},
setup(props) {
const classes = computed(() => {
return `${props.fontWeight==="light"? "light" : "bold"} ${props.class}`;});
return { classes };
},
});
</script>

The is directive of the component, is bound to the as a prop, and an unnamed slot is used to render default children of the Typography component.

As the performance gains between the stateful and functional components are not that significant, it all depends on your personal preference.

You can find the code for the above example here. Please do try and do let me know if I can refactor or improve on this design.

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.