Documentation v0.6.19
Home GitHub

Constructor Options

This page lists every option accepted by new QUI(options), with its type, default, and how options interact.

Type

new QUI(options: {
  id?: string;
  render?: () => string;
  data?: Record<string, any>;
  event?: Record<string, Function>;
  i18n?: Record<string, string | object>;
  i18nLang?: string;
  once?: boolean;
  option?: { svg?: boolean; lazyload?: boolean };
  when?: {
    beforeRender?: () => boolean | void;
    rendered?: (sec: number) => void;
    beforeUpdate?: () => boolean | void;
    updated?: (sec: number) => void;
    beforeDestroy?: () => boolean | void;
    destroyed?: (sec: number) => void;
  };
})

Options

Option Type Default Description
id string None ID of the element used as template and mount point
render () => string None Returns a Render Shorthand string
data object {} Reactive data, see Reactive Data
event object {} Event handlers, see Event Binding
i18n object None Locale objects or JSON URLs, see i18n
i18nLang string "zh" Initial locale
once boolean false When true, data is not wrapped in a Proxy and renders once
option.svg boolean true Enables SVG Inlining
option.lazyload boolean true Enables Image Lazy Loading
when object None Lifecycle Hooks

Combining id and render

id render Result
Set Not set The element's content is the template and the element is updated in place
Set Set The output of render() replaces the element's content and becomes the template
Not set Set A detached <section class="QUIFragment"> is created; get the result with fragment()
Not set Not set An error is logged and the instance does not render
Points to a missing element Any An error is logged and the instance does not render

Interactions

Combination Result
once: true + app.lang() The locale value changes but nothing re-renders
option.lazyload: false + :lazyload in the template Throws
option.svg: false + <temp-svg :src> in the template Throws
No when Hooks are read from a lifecycle object, then from the top level of the options (legacy forms, see Deprecations)
中文