A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid

This article details the creation of a design system typography grid using Vue render functions. A live demo and the source code are provided. Render functions offer superior control over HTML generation compared to standard Vue templates, yet practical examples beyond tutorials are scarce. This project aims to bridge that gap.

Render functions, while powerful, can feel counterintuitive within Vue's simplicity-focused framework. Their blend of HTML and JavaScript can lead to less readable code. For instance, rendering a simple <div> with a <code><p></p> requires a more verbose approach with createElement.

The challenge involved building a typography grid for a design system, as per a designer's mockup, using VuePress. The CSS included separate classes for font weight and size, targeting headings via tag names and other elements through class names.

Several approaches were considered:

• Hardcoding: Rejected due to repetition, lack of data separation, and difficulty in managing updates.
• Traditional Vue Templates: Deemed unsuitable because of the extensive v-if and v-else statements needed to handle the conditional rendering of various typography options and their variations.

Render functions emerged as the optimal solution due to their ability to dynamically create child nodes based on predefined criteria.

Data Model: Typography data was stored in a separate JSON file for easy modification. Each JSON object represents a row, containing information such as text content, the root element tag (h1, p, etc.), styling properties, and usage examples. Arrays within the JSON structure handle variations in styling and multiple usage examples.

The implementation involved a parent component (TypographyTable.vue) and a child functional component (TypographyRow.vue). The parent component iterates through the JSON data, passing each row to the child component. The child component uses render functions to generate the HTML.

Data transformation functions were crucial. These functions converted the raw JSON data into a structured format suitable for the createElement function. This involved creating a tree-like structure for each cell, handling variations in styling and the presence of child nodes. Helper functions parsed class names and generated appropriate HTML tags and classes.

The render function within TypographyRow.vue utilizes these transformed data structures to generate the HTML for each row. A nested function structure enhances readability and maintainability.

While this approach might seem overly complex for a relatively simple task, it prioritizes data separation and simplifies future modifications. Changes to the typography can be made by updating the JSON file without altering the Vue components. The trade-off between initial complexity and long-term maintainability is discussed.