Designing a Vue‑Based DSL for Low‑Code Frontend Platforms

Application Decomposition

Typical admin applications consist of three page types—form pages, list pages, and detail pages. Form pages contain form and selector components; list pages contain filter, table, and pagination components (tables may include cell components); detail pages contain list and chart components.

In a typical admin front‑end workflow, the static organization (application → pages → components) forms a tree structure, while dynamic state transfer handles API GET/POST requests, route parameters, and page navigation.

Design Ideas

Two approaches are compared: private protocols (e.g., DingTalk YiDa, Tencent Cloud Development) versus an open‑source DSL built on existing standards. The open‑source route offers better long‑term compatibility and extensibility.

The proposed solution leverages the Vue ecosystem—Vue Single‑File Components (SFC), Vue‑Compiler‑Core, and Vue‑Router—to define a DSL that mirrors familiar Vue conventions while remaining forward‑compatible.

DSL and SDK Design

A complete DSL must describe both application organization and state transfer. The core components are:

Application: routes organize pages using Vue‑Router.

Page: composed of sibling or nested components, described by Vue‑Compiler‑Core.

Component: follows the SFC specification.

Application Specification

The application spec includes metadata and a route structure. Routes are linked to pages via PageID, and page state is passed exclusively through routing.

Page Specification

Pages are divided into layout pages (e.g., navigation) and landing pages (detail or list). Layout pages can be nested; landing pages are embedded within them.

Component Specification

Components follow the Vue SFC format and include identifier, property description, and version information.

Component Node Dependency

Based on Vue‑Compiler‑Core, seven node classes are defined, each with constructor, update, serialize, and deserialize methods.

Example Code

Application assembly using the SDK:

import Application, { ApplicationDSL } from './Application';
import Route, { RouteDSL } from './Route';
import Page, { PageDSL } from './Page';
import ElementNode, { ElementNodeDSL } from './ElementNode';

const app = new Application({});
const page = new Page({});
const route = new Route({meta: { pageId: page.meta.uuid, page: page }});
app.routeInsertInto(route, undefined);

const component = new ElementNode({
  tag: 'TheBothLayout',
  propsScheme: {
    properties: {
      menus: {
        title: '菜单',
        type: 'array',
        default: ''
      }
    }
  }
});
page.componentInsertInto(component, undefined);

Serialized structure example:

{
  "meta": {
    "name": "",
    "uuid": "1fafcf93-99adb0b18564",
    "specVersion": "0.1.0"
  },
  "body": [
    {
      "children": [],
      "meta": {
        "uuid": "a0eced40-ee12609d586e",
        "pageId": "0729c617-9f75e32f8fc4",
        "specVersion": "0.1.0"
      }
    }
  ]
}

Further Reflections

Low‑code platforms embody the templated reuse of best‑practice components: standardizing front‑end engineer expertise into reusable UI libraries (e.g., Ant Design), visual assembly tools that lower marginal production costs, and AI‑driven code generation (e.g., imgcook) for data‑driven automation.

The goal is efficiency—not shifting work to non‑engineers—but integrating low‑code configuration with existing development to reduce repetitive effort and improve quality.