A Vue.js component library for dynamic JSON-driven UIs with template preprocessing.
npm install @feedmepos/ordering-uiA Vue.js component library for dynamic JSON-driven UIs with template preprocessing.
Renders Vue components from JSON templates with support for built-in and remote components.
``vue
:built-in-component-loader="loadBuiltIn"
:props-loader="loadProps"
/>
`
JsonRenderer can resolve BUILT_IN / REMOTE descriptors inside static props (top-level only).
This is useful for passing a component as a prop to simulate slots.
`js`
const template = {
component: { type: 'BUILT_IN', id: 'Card' },
props: {
// top-level static prop only
headerComponent: { type: 'BUILT_IN', id: 'OrderButton' },
footerComponent: {
type: 'REMOTE',
url: 'https://cdn.example.com/components.js',
name: 'FooterActions'
}
}
}
In your receiving component (e.g. Card), render the prop with component:
`vue`
- HTML tags: "div", "button", etc.{ type: 'BUILT_IN', id: 'ComponentName' }
- Built-in: { type: 'REMOTE', url: 'https://...', name: 'ExportName' }
- Remote:
Processes JSON templates with context variables using {{ }} syntax.
`js
import { renderJsonWithContext, renderTemplateWithContext } from '@/preprocessor'
// Template string processing
const template = "Hello {{ name }}, you are {{ age }} years old"
const context = { name: 'John', age: 30 }
const result = renderTemplateWithContext(template, context)
// "Hello John, you are 30 years old"
// Boolean expressions
const condition = "{{ deviceType === 'tablet' }}"
const isTablet = renderTemplateWithContext(condition, { deviceType: 'tablet' })
// true
// JSON object processing
const jsonTemplate = {
title: "User: {{ name }}",
enabled: "{{ isActive }}",
count: "{{ items * 2 }}",
nested: {
message: "Status: {{ status === 'active' ? 'online' : 'offline' }}"
}
}
const processedJson = renderJsonWithContext(jsonTemplate, {
name: 'Alice',
isActive: true,
items: 5,
status: 'active'
})
// {
// title: "User: Alice",
// enabled: true,
// count: 10,
// nested: { message: "Status: online" }
// }
`
- Only primitive values: string, number, boolean, null`
- No arrays, objects, functions, or undefined
- Template expressions must be JSON-serializable