How to use the withCtx function from vue

Find comprehensive JavaScript vue.withCtx code examples handpicked from public code repositorys.

vue.withCtx is a function in Vue 3 that allows for creating advanced render functions.

index.js

103
104
105
106
107
108
109
110
111
112
const spinnerText = vue.h('p', { class: 'el-loading-text' }, [this.text]);
return vue.h(vue.Transition, {
    name: 'el-loading-fade',
    onAfterLeave: this.handleAfterLeave,
}, {
    default: vue.withCtx(() => [vue.withDirectives(vue.createVNode('div', {
            style: {
                backgroundColor: this.background || '',
            },
            class: [

index.js

GitHub: hacfins/vue3-multi-page

89
90
91
92
93
94
95
96
97
98

const _hoisted_1 = /*#__PURE__*/vue.createVNode("i", { class: "el-icon-caret-top" }, null, -1 /* HOISTED */);

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-fade-in" }, {
    default: vue.withCtx(() => [
      (_ctx.visible)
        ? (vue.openBlock(), vue.createBlock("div", {
            key: 0,
            style: {

How does vue.withCtx work?

The vue.withCtx function is used to create a new render function that has an optimized render context for the component's child components, by passing a context object that includes information about the parent component, the slot scope and the vnode.

index.js

GitHub: infinitasx/easi-packages-antd

190
191
192
193
194
195
196
197
198
199
  itemRender: vue.withCtx(({
    route
  }) => [vue.createVNode(_component_router_link, {
    to: route.path
  }, {
    default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(route.breadcrumbName), 1)]),
    _: 2
  }, 1032, ["to"])]),
  _: 1
}, 8, ["routes"])) : vue.createCommentVNode("v-if", true)]),

+ 17 other calls in file

index.js

GitHub: infinitasx/easi-packages-antd

165
166
167
168
169
170
171
172
173
174
  "onUpdate:openKeys": _cache[1] || (_cache[1] = $event => _ctx.openKeys = $event),
  selectedKeys: _ctx.selectedKeys,
  "onUpdate:selectedKeys": _cache[2] || (_cache[2] = $event => _ctx.selectedKeys = $event),
  theme: "dark"
}, {
  default: _vue.withCtx(() => [(_vue.openBlock(true), _vue.createBlock(_vue.Fragment, null, _vue.renderList(_ctx.nav, item => {
    return _vue.openBlock(), _vue.createBlock(_vue.Fragment, {
      key: item.name
    }, [item.children && item.children.length > 0 && !item.meta.hideMenu ? (_vue.openBlock(), _vue.createBlock(_component_a_sub_menu, {
      key: item.name

+ 19 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { withCtx, createBlock } from "vue";

const MyComponent = {
  setup() {
    const handleClick = () => {
      console.log("Button clicked");
    };

    return () => {
      // Use withCtx to indicate that the button content needs to be compiled in
      // "block" mode (meaning it should be compiled as a separate block for better
      // performance).
      return withCtx(() => [
        // Create a "button" block using createBlock.
        createBlock("button", { onClick: handleClick }, "Click me"),
      ]);
    };
  },
};

In this example, withCtx is used to optimize the rendering of the button by compiling its content as a separate block. This can help improve performance in certain scenarios.

index.js

GitHub: infinitasx/easi-packages-antd

61
62
63
64
65
66
67
68
69
70

  return vue.openBlock(), vue.createBlock(_component_a_button, vue.mergeProps(_ctx.$attrs, {
    type: _ctx.type,
    class: _ctx.className
  }), {
    icon: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "icon")]),
    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
    _: 3
  }, 16, ["type", "class"]);
}

+ 3 other calls in file

dropdown.cjs.js

GitHub: nathanhennig/primevue-dist

1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
  _: 2
}, [
  (_ctx.$slots.loader)
    ? {
        name: "loader",
        fn: vue.withCtx(({ options }) => [
          vue.renderSlot(_ctx.$slots, "loader", { options: options })
        ]),
        key: "0"
      }

+ 99 other calls in file

index.js

GitHub: BlackToolBoxLaboratory/vue-list

221
222
223
224
225
226
227
228
229
230
  onToggleCollapsed: _ctx.toggleCollapsed
}, vue.createSlots({ _: 2 /* DYNAMIC */ }, [
  vue.renderList(_ctx.slotList, (name) => {
    return {
      name: name,
      fn: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, name)
      ])
    }
  })

+ 3 other calls in file

Other functions in vue

Sorted by popularity

vue.createElementBlock is the most popular function in vue (2388 examples)

Other popular packages:

Home

About