How to use vue

Comprehensive vue code examples:

How to use vue.render:

124
125
126
127
128
129
130
131
132
133
                    ]), [[vue.vShow, this.visible]])]),
            });
        },
    };
    vm = vue.createVNode(elLoadingComponent);
    vue.render(vm, document.createElement('div'));
    return Object.assign(Object.assign({}, componentSetupConfig), { vm, get $el() {
            return vm.el;
        } });
}

How to use vue.createStaticVNode:

3004
3005
3006
3007
3008
3009
3010
3011
3012
3013
    "class": 'html',
    innerHTML: html
  });
};
VueRenderer.prototype.inlineHtml = function (html) {
  return vue.createStaticVNode(html, staticCount++);
};
/**
 * @param {string} inlineVNode
 * @param {string} level

How to use vue.popScopeId:

14
15
16
17
18
19
20
21
22
23
24
25


var vue = require('vue');
var Prism = require('prismjs');
var UAParser = require('ua-parser-js');


const _withScopeId = n => (vue.pushScopeId("data-v-7d8ba791"), n = n(), vue.popScopeId(), n);
const _hoisted_1$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/ vue.createElementVNode("path", { d: "M224 0c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224zM64 160c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64H64V224h64V160H64z" }, null, -1 /* HOISTED */));
const _hoisted_2$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/ vue.createElementVNode("path", { d: "M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }, null, -1 /* HOISTED */));
const _hoisted_3$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/ vue.createElementVNode("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }, null, -1 /* HOISTED */));
var _sfc_main$1 = /*#__PURE__*/ vue.defineComponent({

How to use vue.version:

1
2
3
4
5
6
7
8
9
10

exports.Vue = Vue
exports.Vue2 = Vue
exports.isVue2 = true
exports.isVue3 = false
exports.version = Vue.version

// Vue3-only APIs
exports.computed = undefined
exports.createApp = undefined

How to use vue.withModifiers:

197
198
199
200
201
202
203
204
205
206
  class: ["el-select-dropdown__item", {
    'selected': _ctx.itemSelected,
    'is-disabled': _ctx.isDisabled,
    'hover': _ctx.hover}],
  onMouseenter: _cache[1] || (_cache[1] = (...args) => (_ctx.hoverItem && _ctx.hoverItem(...args))),
  onClick: _cache[2] || (_cache[2] = vue.withModifiers((...args) => (_ctx.selectOptionClick && _ctx.selectOptionClick(...args)), ["stop"]))
}, [
  vue.renderSlot(_ctx.$slots, "default", {}, () => [
    vue.createVNode("span", null, vue.toDisplayString(_ctx.currentLabel), 1 /* TEXT */)
  ])

How to use vue.renderList:

218
219
220
221
222
223
224
225
226
227
  collapseEnable: _ctx.props.collapseEnable,
  onUpdateLayerSize: (height) => _ctx.updateLayer(height, entry.id),
  onClickEntry: _ctx.clickEntry,
  onToggleCollapsed: _ctx.toggleCollapsed
}, vue.createSlots({ _: 2 /* DYNAMIC */ }, [
  vue.renderList(_ctx.slotList, (name) => {
    return {
      name: name,
      fn: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, name)

How to use vue.onUpdated:

126
127
128
129
130
131
132
133
134
135
props: {},
setup() {
    const itemRef = vue.ref();
    vue.onMounted(() => {
    });
    vue.onUpdated(() => {
    });
    return {
        itemRef,
    };

How to use vue.onBeforeUnmount:

160
161
162
163
164
165
166
167
168
169
});
const { currentLabel, itemSelected, isDisabled, select, hoverItem, } = useOption(props, states);
const { visible, hover, } = vue.toRefs(states);
const vm = vue.getCurrentInstance().proxy;
select.onOptionCreate(vm);
vue.onBeforeUnmount(() => {
    const { selected } = select;
    let selectedOptions = select.props.multiple ? selected : [selected];
    const doesExist = select.cachedOptions.has(props.value);
    const doesSelected = selectedOptions.some(item => {

How to use vue.onBeforeMount:

64
65
66
67
68
69
70
71
72
73
},
setup(props, { slots }) {
    const abstract = vue.ref(false);
    const static_ = vue.ref(false);
    const el = vue.ref();
    vue.onBeforeMount(() => {
        abstract.value = props.abstract;
        static_.value = props.static;
    });
    vue.onMounted(() => {

How to use vue.createSSRApp:

78
79
80
81
82
83
84
85
86
  </body>
  </html>`
}


module.exports = (routeMetadatas, cb) => {
  const app = createSSRApp(ApiDoc, {routeMetadatas})
  renderToString(app).then(html => cb(buildHtml(html)))
}

How to use vue.markRaw:

299
300
301
302
303
304
305
306
307
308
309
    }
};


const createProxy = (context, target, resolveContext, pathSegments = []) => {
    const handler = createHandler(context, resolveContext, pathSegments);
    const proxy = vue.markRaw(new Proxy(target, handler));
    if (!pathSegments.length && context.sources) {
        context.sources.push(proxy);
    }
    return proxy;

How to use vue.toRefs:

82
83
84
85
86
87
88
89
90
91
    if (!afterLeaveFlag.value)
        return;
    afterLeaveFlag.value = false;
    destroySelf();
}
const componentSetupConfig = Object.assign(Object.assign({}, vue.toRefs(data)), { setText,
    close,
    handleAfterLeave });
const elLoadingComponent = {
    name: 'ElLoading',

How to use vue.useSlots:

239
240
241
242
243
244
245
246
247
248
const prismThemeOkaidia = undefined('prismjs/themes/prism-okaidia.css', { eager: true, as: 'raw' });
const prismThemeSolarizedlight = undefined('prismjs/themes/prism-solarizedlight.css', { eager: true, as: 'raw' });
const prismThemeTomorrow = undefined('prismjs/themes/prism-tomorrow.css', { eager: true, as: 'raw' });
const prismThemeTwilight = undefined('prismjs/themes/prism-twilight.css', { eager: true, as: 'raw' });
// -------------------------------------------------- Emits & Slots & Injects //
const slots = vue.useSlots();
const codeBlockGlobalOptions = vue.inject('codeBlockGlobalOptions');
// -------------------------------------------------- Props //
// -------------------------------------------------- Data //
const copyTextValue = vue.ref('');

How to use vue.watchEffect:

2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
};
// @ts-expect-error: this is internal
instance.__vrl_devtools = instance.__vrl_devtools || [];
// @ts-expect-error: this is internal
instance.__vrl_devtools.push(linkContextDevtools);
vue.watchEffect(() => {
    linkContextDevtools.route = route.value;
    linkContextDevtools.isActive = isActive.value;
    linkContextDevtools.isExactActive = isExactActive.value;
}, { flush: 'post' });

How to use vue.openBlock:

57
58
59
60
61
62
63
64
65
66
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_a_button = vue.resolveComponent("a-button");

  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")]),

How to use vue.shallowRef:

2803
2804
2805
2806
2807
2808
2809
2810
2811
2812
    throw new Error('Provide the "history" option when calling "createRouter()":' +
        ' https://next.router.vuejs.org/api/#history.');
const beforeGuards = useCallbacks();
const beforeResolveGuards = useCallbacks();
const afterGuards = useCallbacks();
const currentRoute = vue.shallowRef(START_LOCATION_NORMALIZED);
let pendingLocation = START_LOCATION_NORMALIZED;
// leave the scrollRestoration if no scrollBehavior is provided
if (isBrowser && options.scrollBehavior && 'scrollRestoration' in history) {
    history.scrollRestoration = 'manual';

How to use vue.onDeactivated:

114
115
116
117
118
119
120
121
122
123
vue_1.onActivated(function () {
  if (!mounting) {
    initWrapper()
  }
})
vue_1.onDeactivated(function () {
  var _a
  if (!modelBind) {
    cache = vueEditor.getContent()
  }

How to use vue.onActivated:

109
110
111
112
113
114
115
116
117
118
  if (TinyMCE_1.getTinymce() !== null) {
    TinyMCE_1.getTinymce().remove(vueEditor)
  }
})
if (!inlineEditor) {
  vue_1.onActivated(function () {
    if (!mounting) {
      initWrapper()
    }
  })

How to use vue.mergeProps:

569
570
571
572
573
574
575
576
577
578
            const props = getSSRProps(binding, vnode);
            if (props)
                toMerge.push(props);
        }
    }
    return Vue.mergeProps(rawProps || {}, ...toMerge);
}
function renderTeleportVNode(push, vnode, parentComponent, slotScopeId) {
    const target = vnode.props && vnode.props.to;
    const disabled = vnode.props && vnode.props.disabled;

How to use vue.shallowReactive:

176
177
178
179
180
181
182
183
184
185
186
187
188
189


  return Router;
}();


function createRouter(options) {
  var router = vue.shallowReactive(new Router(options));


  router._init();


  router.install = function (app) {

How to use vue.onMounted:

68
69
70
71
72
73
74
75
76
77
const el = vue.ref();
vue.onBeforeMount(() => {
    abstract.value = props.abstract;
    static_.value = props.static;
});
vue.onMounted(() => {
    if (abstract.value) {
        makeShadowRaw(el.value.parentElement, el.value.childNodes);
    }
    else {

How to use vue.extend:

270
271
272
273
274
275
276
277
278
279
},{}],18:[function(require,module,exports){
var Router = require('director').Router;
var Vue = require('vue');
var _ = require('underscore');

module.exports = Vue.extend({
  created: function() {
    var app = this;
    var routes = _(this.$options.components).reduce(function(m, v, k) {
      var routeInfo = _.chain(v.options.route).pairs().first().value();

How to use vue.onUnmounted:

101
102
103
104
105
106
107
108
109
110
if (depth != null) {
  var removeGuard = router.beforeEach(function (to, from, next) {
    return fn(to, from, depth) ? guard(to, from, next) : next()
  })

  vue.onUnmounted(removeGuard)
  return removeGuard
}

return noop

How to use vue.nextTick:

99
100
101
102
103
104
105
106
107

attached: function() {

  if (this.initCompleted && this.minifigDraggingInstance) {

    Vue.nextTick(function() {

      this.start();
      this.backToIdle();

How to use vue.effectScope:

128
129
130
131
132
133
134
135
136
137
var computedObj = {};
var computedCache = {};

// create a new effect scope and create computed object inside it to avoid
// getters (computed) getting destroyed on component unmount.
var scope = vue.effectScope(true);

scope.run(function () {
  forEachValue(wrappedGetters, function (fn, key) {
    // use computed to leverage its lazy-caching mechanism

How to use vue.createSlots:

30
31
32
33
34
35
36
37
38
39
  bordered: false,
  class: "easi-packages-error-full-page"
}, {
  default: vue.withCtx(() => [vue.createVNode(_component_a_result, {
    status: _ctx.status
  }, vue.createSlots({
    _: 2
  }, [vue.renderList(_ctx.$slots, (index, name) => {
    return {
      name,

How to use vue.provide:

328
329
330
331
332
333
334
335
336
337
vue.onUpdated(function () {
    if (typeof props.activeID !== "undefined") {
        changeActiveID(props.activeID);
    }
});
vue.provide("BtbVueList-activeEntryID", activeEntryID);
return {
    BtbVueListLayer: script$1,
    getStyle: getStyle,
    props: props,

How to use vue.ssrUtils:

325
326
327
328
329
330
331
332
333
334
335
    };
    const fakeRequire = (id) => requireMap[id];
    return (compileCache[cacheKey] = Function('require', code)(fakeRequire));
}


const { createComponentInstance, setCurrentRenderingInstance, setupComponent, renderComponentRoot, normalizeVNode } = Vue.ssrUtils;
// Each component has a buffer array.
// A buffer array can contain one of the following:
// - plain string
// - A resolved buffer (recursive arrays of strings that can be unrolled

How to use vue.warn:

576
577
578
579
580
581
582
583
584
585
function renderTeleportVNode(push, vnode, parentComponent, slotScopeId) {
    const target = vnode.props && vnode.props.to;
    const disabled = vnode.props && vnode.props.disabled;
    if (!target) {
        if (!disabled) {
            Vue.warn(`[@vue/server-renderer] Teleport is missing target prop.`);
        }
        return [];
    }
    if (!shared.isString(target)) {

How to use vue.resolveDirective:

960
961
962
963
964
965
966
967
968
969
970
971
};


function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_VirtualScroller = vue.resolveComponent("VirtualScroller");
  const _component_Portal = vue.resolveComponent("Portal");
  const _directive_ripple = vue.resolveDirective("ripple");


  return (vue.openBlock(), vue.createElementBlock("div", {
    ref: "container",
    id: $data.id,