Edit fiddle - JSFiddle - Code Playground

HTML

xxxxxxxxxx
 
<div id="app">
  <my-component>
    <template slot="content">
    foo
    </template>
  </my-component>
  <my-component>
    <template v-slot:content>
    foo
    </template>
  </my-component>
</div>
​

JavaScript

Module

xxxxxxxxxx
 
Vue.component('my-component', {
  template: '<div><p><slot name="content"></p></slot>$slots: {{$slots}}</div>',
  created () {
    console.log(this)
  }
});
​
new Vue({ el: '#app' })

CSS

xxxxxxxxxx
 
​

563px

JSFiddle Console. Turn on/off in Editor settings.
☁️ "Running fiddle"
{ $attrs: { ... }, $children: [], $createElement: function(e,n,r,i){return hn(t,e,n,r,i,!0)}, $delete: function xe(e,t){if(Array.isArray(e)&&c(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||y(e,t)&&(delete e[t],n&&n.dep.notify())}}, $destroy: function(){var e=this;if(!e._isBeingDestroyed){$t(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||h(t.$children,e),e._watcher&&e._watcher.teardown();for(var n=e._watchers.length;n--;)e._watchers[n].teardown();e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),$t(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}, $emit: function(e){var t=this._events[e];if(t){t=t.length>1?A(t):t;for(var n=A(arguments,1),r='event handler for "'+e+'"',i=0,o=t.length;i<o;i++)Re(t[i],this,n,this,r)}return this}, $forceUpdate: function(){this._watcher&&this._watcher.update()}, $listeners: [circular object Object], $mount: function(e,t){if((e=e&&Wn(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=es(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){var i=Ga(r,{outputSourceRange:!1,shouldDecodeNewlines:Ya,shouldDecodeNewlinesForHref:Qa,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return ts.call(this,e,t)}, $nextTick: function(e){return Ge(e,this)}, $off: function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(e)){for(var r=0,i=e.length;r<i;r++)n.$off(e[r],t);return n}var o,a=n._events[e];if(!a)return n;if(!t)return n._events[e]=null,n;for(var s=a.length;s--;)if((o=a[s])===t||o.fn===t){a.splice(s,1);break}return n}, $on: function(e,n){var r=this;if(Array.isArray(e))for(var i=0,o=e.length;i<o;i++)r.$on(e[i],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r}, $once: function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n}, $options: { _base: function gn(e){this._init(e)}, _componentTag: "my-component", _Ctor: { ... }, _parentListeners: undefined, _parentVnode: { ... }, _renderChildren: [{ asyncFactory: undefined, asyncMeta: undefined, children: [{ asyncFactory: undefined, asyncMeta: undefined, children: undefined, componentInstance: undefined, componentOptions: undefined, context: undefined, data: undefined, elm: undefined, fnContext: undefined, fnOptions: undefined, fnScopeId: undefined, isAsyncPlaceholder: false, isCloned: false, isComment: false, isOnce: false, isRootInsert: true, isStatic: false, key: undefined, ns: undefined, parent: undefined, raw: false, tag: undefined, text: " foo " }], componentInstance: undefined, componentOptions: undefined, context: { $attrs: [circular object Object], $children: [[circular object Object]], $createElement: function(e,n,r,i){return hn(t,e,n,r,i,!0)}, $delete: function xe(e,t){if(Array.isArray(e)&&c(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||y(e,t)&&(delete e[t],n&&n.dep.notify())}}, $destroy: function(){var e=this;if(!e._isBeingDestroyed){$t(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||h(t.$children,e),e._watcher&&e._watcher.teardown();for(var n=e._watchers.length;n--;)e._watchers[n].teardown();e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),$t(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}, $el: [object HTMLDivElement] { ... }, $emit: function(e){var t=this._events[e];if(t){t=t.length>1?A(t):t;for(var n=A(arguments,1),r='event handler for "'+e+'"',i=0,o=t.length;i<o;i++)Re(t[i],this,n,this,r)}return this}, $forceUpdate: function(){this._watcher&&this._watcher.update()}, $listeners: [circular object Object], $mount: function(e,t){if((e=e&&Wn(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=es(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){var i=Ga(r,{outputSourceRange:!1,shouldDecodeNewlines:Ya,shouldDecodeNewlinesForHref:Qa,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return ts.call(this,e,t)}, $nextTick: function(e){return Ge(e,this)}, $off: function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(e)){for(var r=0,i=e.length;r<i;r++)n.$off(e[r],t);return n}var o,a=n._events[e];if(!a)return n;if(!t)return n._events[e]=null,n;for(var s=a.length;s--;)if((o=a[s])===t||o.fn===t){a.splice(s,1);break}return n}, $on: function(e,n){var r=this;if(Array.isArray(e))for(var i=0,o=e.length;i<o;i++)r.$on(e[i],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r}, $once: function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n}, $options: { ... }, $parent: undefined, $refs: { ... }, $root: [circular object Object], $scopedSlots: [circular object Object], $set: function Ce(e,t,n){if(Array.isArray(e)&&c(t))return e.length=Math.max(e.length,t),e.splice(t,1,n),n;if(t in e&&!(t in Object.prototype))return e[t]=n,n;var r=e.__ob__;return e._isVue||r&&r.vmCount?n:r?(we(r.value,t,n),r.dep.notify(),n):(e[t]=n,n)}, $slots: { ... }, $vnode: undefined, $watch: function(e,t,n){if(s(t))return Ht(this,e,t,n);(n=n||{}).user=!0;var r=new jt(this,e,t,n);if(n.immediate)try{t.call(this,r.value)}catch(e){Pe(e,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}, __patch__: function(e,i,o,a){if(!t(i)){var c,l=!1,p=[];if(t(e))l=!0,f(i,p);else{var d=n(e.nodeType);if(!d&&er(e,i))x(e,i,p,null,null,a);else{if(d){if(1===e.nodeType&&e.hasAttribute(I)&&(e.removeAttribute(I),o=!0),r(o)&&O(e,i,p))return A(i,p,!0),e;c=e,e=new le(u.tagName(c).toLowerCase(),{},[],void 0,c)}var v=e.elm,h=u.parentNode(v);if(f(i,p,v._leaveCb?null:h,u.nextSibling(v)),n(i.parent))for(var y=i.parent,g=m(i);y;){for(var _=0;_<s.destroy.length;++_)s.destroy[_](y);if(y.elm=i.elm,g){for(var w=0;w<s.create.length;++w)s.create[w](Yn,y);var C=y.data.hook.insert;if(C.merged)for(var k=1;k<C.fns.length;k++)C.fns[k]()}else Xn(y);y=y.parent}n(h)?$(0,[e],0,0):n(e.tag)&&b(e)}}return A(i,p,l),i.elm}n(e)&&b(e)}, _b: function Gt(e,t,n,r,i){if(n)if(o(n)){var a;Array.isArray(n)&&(n=O(n));var s=function(o){if("class"===o||"style"===o||v(o))a=e;else{var s=e.attrs&&e.attrs.type;a=r||P.mustUseProp(t,s,o)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var c=b(o);o in a||c in a||(a[o]=n[o],i&&((e.on||(e.on={}))["update:"+c]=function(e){n[o]=e}))};for(var c in n)s(c)}else;return e}, _c: function(e,n,r,i){return hn(t,e,n,r,i,!1)}, _d: function nn(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}, _data: { ... }, _directInactive: false, _e: function(e){void 0===e&&(e="");var t=new le;return t.text=e,t.isComment=!0,t}, _events: { ... }, _f: function qt(e){return je(this.$options,"filters",e)||N}, _g: function tn(e,t){if(t)if(s(t)){var n=e.on=e.on?k({},e.on):{};for(var r in t){var i=n[r],o=t[r];n[r]=i?[].concat(i,o):o}}else;return e}, _hasHookEvent: false, _i: function j(e,t){for(var n=0;n<e.length;n++)if(E(e[n],t))return n;return-1}, _inactive: null, _init: function(t){var n=this;n._uid=mn++,n._isVue=!0,t&&t._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(n,t):n.$options=Ee(yn(n.constructor),t||{},n),n._renderProxy=n,n._self=n,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(n),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&dt(e,t)}(n),function(t){t._vnode=null,t._staticTrees=null;var n=t.$options,r=t.$vnode=n._parentVnode,i=r&&r.context;t.$slots=vt(n._renderChildren,i),t.$scopedSlots=e,t._c=function(e,n,r,i){return hn(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return hn(t,e,n,r,i,!0)};var o=r&&r.data;we(t,"$attrs",o&&o.attrs||e,null,!0),we(t,"$listeners",n._parentListeners||e,null,!0)}(n),$t(n,"beforeCreate"),function(e){var t=Bt(e.$options.inject,e);t&&(_e(!1),Object.keys(t).forEach(function(n){we(e,n,t[n])}),_e(!0))}(n),Mt(n),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(n),$t(n,"created"),n.$options.el&&n.$mount(n.$options.el)}, _isBeingDestroyed: false, _isDestroyed: false, _isMounted: false, _isVue: true, _k: function Zt(e,t,n,r,i){var o=P.keyCodes[t]||n;return i&&r&&!P.keyCodes[t]?Wt(i,r):o?Wt(o,e):r?C(r)!==t:void 0}, _l: function Kt(e,t){var r,i,a,s,c;if(Array.isArray(e)||"string"==typeof e)for(r=new Array(e.length),i=0,a=e.length;i<a;i++)r[i]=t(e[i],i);else if("number"==typeof e)for(r=new Array(e),i=0;i<e;i++)r[i]=t(i+1,i);else if(o(e))if(re&&e[Symbol.iterator]){r=[];for(var u=e[Symbol.iterator](),l=u.next();!l.done;)r.push(t(l.value,r.length)),l=u.next()}else for(s=Object.keys(e),r=new Array(s.length),i=0,a=s.length;i<a;i++)c=s[i],r[i]=t(e[c],c,i);return n(r)||(r=[]),r._isVList=!0,r}, _m: function Xt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t?r:(Qt(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,null,this),"__static__"+e,!1),r)}, _n: function f(e){var t=parseFloat(e);return isNaN(t)?e:t}, _o: function Yt(e,t,n){return Qt(e,"__once__"+t+(n?"_"+n:""),!0),e}, _p: function rn(e,t){return"string"==typeof e?t+e:e}, _q: function E(e,t){if(e===t)return!0;var n=o(e),r=o(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var i=Array.isArray(e),a=Array.isArray(t);if(i&&a)return e.length===t.length&&e.every(function(e,n){return E(e,t[n])});if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(i||a)return!1;var s=Object.keys(e),c=Object.keys(t);return s.length===c.length&&s.every(function(n){return E(e[n],t[n])})}catch(e){return!1}}, _render: function(){var e,t=this,n=t.$options,r=n.render,i=n._parentVnode;i&&(t.$scopedSlots=Ut(i.data.scopedSlots,t.$slots)),t.$vnode=i;try{e=r.call(t._renderProxy,t.$createElement)}catch(n){Pe(n,t,"render"),e=t._vnode}return Array.isArray(e)&&1===e.length&&(e=e[0]),e instanceof le||(e=pe()),e.parent=i,e}, _renderProxy: [circular object Object], _s: function l(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===a?JSON.stringify(e,null,2):String(e)}, _self: [circular object Object], _staticTrees: null, _t: function Jt(e,t,n,r){var i,o=this.$scopedSlots[e];o?(n=n||{},r&&(n=k(k({},r),n)),i=o(n)||t):i=this.$slots[e]||t;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},i):i}, _u: function mt(e,t,n){n=n||{$stable:!t};for(var r=0;r<e.length;r++){var i=e[r];Array.isArray(i)?mt(i,t,n):i&&(n[i.key]=i.fn)}return n}, _uid: 0, _update: function(e,t){var n=this,r=n.$el,i=n._vnode,o=gt(n);n._vnode=e,n.$el=i?n.__patch__(i,e):n.__patch__(n.$el,e,t,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)}, _v: function de(e){return new le(void 0,void 0,void 0,String(e))}, _vnode: { ... }, _watcher: { ... }, _watchers: [[circular object Object]] }, data: { slot: "content" }, elm: undefined, fnContext: undefined, fnOptions: undefined, fnScopeId: undefined, isAsyncPlaceholder: false, isCloned: false, isComment: false, isOnce: false, isRootInsert: true, isStatic: false, key: undefined, ns: undefined, parent: undefined, raw: false, tag: "template", text: undefined }], components: { ... }, created: [created () { console.log(this) }], directives: { ... }, filters: { ... }, name: "my-component", parent: [circular object Object], propsData: undefined, template: "<div><p><slot name=\"content\"></p></slot>$slots: {{$slots}}</div>" }, $parent: [circular object Object], $refs: { ... }, $root: [circular object Object], $scopedSlots: [circular object Object], $set: function Ce(e,t,n){if(Array.isArray(e)&&c(t))return e.length=Math.max(e.length,t),e.splice(t,1,n),n;if(t in e&&!(t in Object.prototype))return e[t]=n,n;var r=e.__ob__;return e._isVue||r&&r.vmCount?n:r?(we(r.value,t,n),r.dep.notify(),n):(e[t]=n,n)}, $slots: { content: [[circular object Object]] }, $vnode: [circular object Object], $watch: function(e,t,n){if(s(t))return Ht(this,e,t,n);(n=n||{}).user=!0;var r=new jt(this,e,t,n);if(n.immediate)try{t.call(this,r.value)}catch(e){Pe(e,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}, __patch__: function(e,i,o,a){if(!t(i)){var c,l=!1,p=[];if(t(e))l=!0,f(i,p);else{var d=n(e.nodeType);if(!d&&er(e,i))x(e,i,p,null,null,a);else{if(d){if(1===e.nodeType&&e.hasAttribute(I)&&(e.removeAttribute(I),o=!0),r(o)&&O(e,i,p))return A(i,p,!0),e;c=e,e=new le(u.tagName(c).toLowerCase(),{},[],void 0,c)}var v=e.elm,h=u.parentNode(v);if(f(i,p,v._leaveCb?null:h,u.nextSibling(v)),n(i.parent))for(var y=i.parent,g=m(i);y;){for(var _=0;_<s.destroy.length;++_)s.destroy[_](y);if(y.elm=i.elm,g){for(var w=0;w<s.create.length;++w)s.create[w](Yn,y);var C=y.data.hook.insert;if(C.merged)for(var k=1;k<C.fns.length;k++)C.fns[k]()}else Xn(y);y=y.parent}n(h)?$(0,[e],0,0):n(e.tag)&&b(e)}}return A(i,p,l),i.elm}n(e)&&b(e)}, _b: function Gt(e,t,n,r,i){if(n)if(o(n)){var a;Array.isArray(n)&&(n=O(n));var s=function(o){if("class"===o||"style"===o||v(o))a=e;else{var s=e.attrs&&e.attrs.type;a=r||P.mustUseProp(t,s,o)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var c=b(o);o in a||c in a||(a[o]=n[o],i&&((e.on||(e.on={}))["update:"+c]=function(e){n[o]=e}))};for(var c in n)s(c)}else;return e}, _c: function(e,n,r,i){return hn(t,e,n,r,i,!1)}, _d: function nn(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}, _data: { ... }, _directInactive: false, _e: function(e){void 0===e&&(e="");var t=new le;return t.text=e,t.isComment=!0,t}, _events: { ... }, _f: function qt(e){return je(this.$options,"filters",e)||N}, _g: function tn(e,t){if(t)if(s(t)){var n=e.on=e.on?k({},e.on):{};for(var r in t){var i=n[r],o=t[r];n[r]=i?[].concat(i,o):o}}else;return e}, _hasHookEvent: false, _i: function j(e,t){for(var n=0;n<e.length;n++)if(E(e[n],t))return n;return-1}, _inactive: null, _init: function(t){var n=this;n._uid=mn++,n._isVue=!0,t&&t._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(n,t):n.$options=Ee(yn(n.constructor),t||{},n),n._renderProxy=n,n._self=n,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(n),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&dt(e,t)}(n),function(t){t._vnode=null,t._staticTrees=null;var n=t.$options,r=t.$vnode=n._parentVnode,i=r&&r.context;t.$slots=vt(n._renderChildren,i),t.$scopedSlots=e,t._c=function(e,n,r,i){return hn(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return hn(t,e,n,r,i,!0)};var o=r&&r.data;we(t,"$attrs",o&&o.attrs||e,null,!0),we(t,"$listeners",n._parentListeners||e,null,!0)}(n),$t(n,"beforeCreate"),function(e){var t=Bt(e.$options.inject,e);t&&(_e(!1),Object.keys(t).forEach(function(n){we(e,n,t[n])}),_e(!0))}(n),Mt(n),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(n),$t(n,"created"),n.$options.el&&n.$mount(n.$options.el)}, _isBeingDestroyed: false, _isDestroyed: false, _isMounted: false, _isVue: true, _k: function Zt(e,t,n,r,i){var o=P.keyCodes[t]||n;return i&&r&&!P.keyCodes[t]?Wt(i,r):o?Wt(o,e):r?C(r)!==t:void 0}, _l: function Kt(e,t){var r,i,a,s,c;if(Array.isArray(e)||"string"==typeof e)for(r=new Array(e.length),i=0,a=e.length;i<a;i++)r[i]=t(e[i],i);else if("number"==typeof e)for(r=new Array(e),i=0;i<e;i++)r[i]=t(i+1,i);else if(o(e))if(re&&e[Symbol.iterator]){r=[];for(var u=e[Symbol.iterator](),l=u.next();!l.done;)r.push(t(l.value,r.length)),l=u.next()}else for(s=Object.keys(e),r=new Array(s.length),i=0,a=s.length;i<a;i++)c=s[i],r[i]=t(e[c],c,i);return n(r)||(r=[]),r._isVList=!0,r}, _m: function Xt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t?r:(Qt(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,null,this),"__static__"+e,!1),r)}, _n: function f(e){var t=parseFloat(e);return isNaN(t)?e:t}, _o: function Yt(e,t,n){return Qt(e,"__once__"+t+(n?"_"+n:""),!0),e}, _p: function rn(e,t){return"string"==typeof e?t+e:e}, _q: function E(e,t){if(e===t)return!0;var n=o(e),r=o(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var i=Array.isArray(e),a=Array.isArray(t);if(i&&a)return e.length===t.length&&e.every(function(e,n){return E(e,t[n])});if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(i||a)return!1;var s=Object.keys(e),c=Object.keys(t);return s.length===c.length&&s.every(function(n){return E(e[n],t[n])})}catch(e){return!1}}, _render: function(){var e,t=this,n=t.$options,r=n.render,i=n._parentVnode;i&&(t.$scopedSlots=Ut(i.data.scopedSlots,t.$slots)),t.$vnode=i;try{e=r.call(t._renderProxy,t.$createElement)}catch(n){Pe(n,t,"render"),e=t._vnode}return Array.isArray(e)&&1===e.length&&(e=e[0]),e instanceof le||(e=pe()),e.parent=i,e}, _renderProxy: [circular object Object], _s: function l(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===a?JSON.stringify(e,null,2):String(e)}, _self: [circular object Object], _staticTrees: null, _t: function Jt(e,t,n,r){var i,o=this.$scopedSlots[e];o?(n=n||{},r&&(n=k(k({},r),n)),i=o(n)||t):i=this.$slots[e]||t;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},i):i}, _u: function mt(e,t,n){n=n||{$stable:!t};for(var r=0;r<e.length;r++){var i=e[r];Array.isArray(i)?mt(i,t,n):i&&(n[i.key]=i.fn)}return n}, _uid: 1, _update: function(e,t){var n=this,r=n.$el,i=n._vnode,o=gt(n);n._vnode=e,n.$el=i?n.__patch__(i,e):n.__patch__(n.$el,e,t,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)}, _v: function de(e){return new le(void 0,void 0,void 0,String(e))}, _vnode: null, _watcher: null, _watchers: [], constructor: function(e){this._init(e)} }
{ $attrs: { ... }, $children: [], $createElement: function(e,n,r,i){return hn(t,e,n,r,i,!0)}, $delete: function xe(e,t){if(Array.isArray(e)&&c(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||y(e,t)&&(delete e[t],n&&n.dep.notify())}}, $destroy: function(){var e=this;if(!e._isBeingDestroyed){$t(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||h(t.$children,e),e._watcher&&e._watcher.teardown();for(var n=e._watchers.length;n--;)e._watchers[n].teardown();e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),$t(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}, $emit: function(e){var t=this._events[e];if(t){t=t.length>1?A(t):t;for(var n=A(arguments,1),r='event handler for "'+e+'"',i=0,o=t.length;i<o;i++)Re(t[i],this,n,this,r)}return this}, $forceUpdate: function(){this._watcher&&this._watcher.update()}, $listeners: [circular object Object], $mount: function(e,t){if((e=e&&Wn(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=es(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=function(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}(e));if(r){var i=Ga(r,{outputSourceRange:!1,shouldDecodeNewlines:Ya,shouldDecodeNewlinesForHref:Qa,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return ts.call(this,e,t)}, $nextTick: function(e){return Ge(e,this)}, $off: function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(e)){for(var r=0,i=e.length;r<i;r++)n.$off(e[r],t);return n}var o,a=n._events[e];if(!a)return n;if(!t)return n._events[e]=null,n;for(var s=a.length;s--;)if((o=a[s])===t||o.fn===t){a.splice(s,1);break}return n}, $on: function(e,n){var r=this;if(Array.isArray(e))for(var i=0,o=e.length;i<o;i++)r.$on(e[i],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r}, $once: function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n}, $options: { _base: function gn(e){this._init(e)}, _componentTag: "my-component", _Ctor: { ... }, _parentListeners: undefined, _parentVnode: { ... }, _renderChildren: undefined, components: { ... }, created: [created () { console.log(this) }], directives: { ... }, filters: { ... }, name: "my-component", parent: { ... }, propsData: undefined, template: "<div><p><slot name=\"content\"></p></slot>$slots: {{$slots}}</div>" }, $parent: [circular object Object], $refs: { ... }, $root: [circular object Object], $scopedSlots: [circular object Object], $set: function Ce(e,t,n){if(Array.isArray(e)&&c(t))return e.length=Math.max(e.length,t),e.splice(t,1,n),n;if(t in e&&!(t in Object.prototype))return e[t]=n,n;var r=e.__ob__;return e._isVue||r&&r.vmCount?n:r?(we(r.value,t,n),r.dep.notify(),n):(e[t]=n,n)}, $slots: { ... }, $vnode: [circular object Object], $watch: function(e,t,n){if(s(t))return Ht(this,e,t,n);(n=n||{}).user=!0;var r=new jt(this,e,t,n);if(n.immediate)try{t.call(this,r.value)}catch(e){Pe(e,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}, __patch__: function(e,i,o,a){if(!t(i)){var c,l=!1,p=[];if(t(e))l=!0,f(i,p);else{var d=n(e.nodeType);if(!d&&er(e,i))x(e,i,p,null,null,a);else{if(d){if(1===e.nodeType&&e.hasAttribute(I)&&(e.removeAttribute(I),o=!0),r(o)&&O(e,i,p))return A(i,p,!0),e;c=e,e=new le(u.tagName(c).toLowerCase(),{},[],void 0,c)}var v=e.elm,h=u.parentNode(v);if(f(i,p,v._leaveCb?null:h,u.nextSibling(v)),n(i.parent))for(var y=i.parent,g=m(i);y;){for(var _=0;_<s.destroy.length;++_)s.destroy[_](y);if(y.elm=i.elm,g){for(var w=0;w<s.create.length;++w)s.create[w](Yn,y);var C=y.data.hook.insert;if(C.merged)for(var k=1;k<C.fns.length;k++)C.fns[k]()}else Xn(y);y=y.parent}n(h)?$(0,[e],0,0):n(e.tag)&&b(e)}}return A(i,p,l),i.elm}n(e)&&b(e)}, _b: function Gt(e,t,n,r,i){if(n)if(o(n)){var a;Array.isArray(n)&&(n=O(n));var s=function(o){if("class"===o||"style"===o||v(o))a=e;else{var s=e.attrs&&e.attrs.type;a=r||P.mustUseProp(t,s,o)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var c=b(o);o in a||c in a||(a[o]=n[o],i&&((e.on||(e.on={}))["update:"+c]=function(e){n[o]=e}))};for(var c in n)s(c)}else;return e}, _c: function(e,n,r,i){return hn(t,e,n,r,i,!1)}, _d: function nn(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}, _data: { ... }, _directInactive: false, _e: function(e){void 0===e&&(e="");var t=new le;return t.text=e,t.isComment=!0,t}, _events: { ... }, _f: function qt(e){return je(this.$options,"filters",e)||N}, _g: function tn(e,t){if(t)if(s(t)){var n=e.on=e.on?k({},e.on):{};for(var r in t){var i=n[r],o=t[r];n[r]=i?[].concat(i,o):o}}else;return e}, _hasHookEvent: false, _i: function j(e,t){for(var n=0;n<e.length;n++)if(E(e[n],t))return n;return-1}, _inactive: null, _init: function(t){var n=this;n._uid=mn++,n._isVue=!0,t&&t._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(n,t):n.$options=Ee(yn(n.constructor),t||{},n),n._renderProxy=n,n._self=n,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(n),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&dt(e,t)}(n),function(t){t._vnode=null,t._staticTrees=null;var n=t.$options,r=t.$vnode=n._parentVnode,i=r&&r.context;t.$slots=vt(n._renderChildren,i),t.$scopedSlots=e,t._c=function(e,n,r,i){return hn(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return hn(t,e,n,r,i,!0)};var o=r&&r.data;we(t,"$attrs",o&&o.attrs||e,null,!0),we(t,"$listeners",n._parentListeners||e,null,!0)}(n),$t(n,"beforeCreate"),function(e){var t=Bt(e.$options.inject,e);t&&(_e(!1),Object.keys(t).forEach(function(n){we(e,n,t[n])}),_e(!0))}(n),Mt(n),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(n),$t(n,"created"),n.$options.el&&n.$mount(n.$options.el)}, _isBeingDestroyed: false, _isDestroyed: false, _isMounted: false, _isVue: true, _k: function Zt(e,t,n,r,i){var o=P.keyCodes[t]||n;return i&&r&&!P.keyCodes[t]?Wt(i,r):o?Wt(o,e):r?C(r)!==t:void 0}, _l: function Kt(e,t){var r,i,a,s,c;if(Array.isArray(e)||"string"==typeof e)for(r=new Array(e.length),i=0,a=e.length;i<a;i++)r[i]=t(e[i],i);else if("number"==typeof e)for(r=new Array(e),i=0;i<e;i++)r[i]=t(i+1,i);else if(o(e))if(re&&e[Symbol.iterator]){r=[];for(var u=e[Symbol.iterator](),l=u.next();!l.done;)r.push(t(l.value,r.length)),l=u.next()}else for(s=Object.keys(e),r=new Array(s.length),i=0,a=s.length;i<a;i++)c=s[i],r[i]=t(e[c],c,i);return n(r)||(r=[]),r._isVList=!0,r}, _m: function Xt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t?r:(Qt(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,null,this),"__static__"+e,!1),r)}, _n: function f(e){var t=parseFloat(e);return isNaN(t)?e:t}, _o: function Yt(e,t,n){return Qt(e,"__once__"+t+(n?"_"+n:""),!0),e}, _p: function rn(e,t){return"string"==typeof e?t+e:e}, _q: function E(e,t){if(e===t)return!0;var n=o(e),r=o(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var i=Array.isArray(e),a=Array.isArray(t);if(i&&a)return e.length===t.length&&e.every(function(e,n){return E(e,t[n])});if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(i||a)return!1;var s=Object.keys(e),c=Object.keys(t);return s.length===c.length&&s.every(function(n){return E(e[n],t[n])})}catch(e){return!1}}, _render: function(){var e,t=this,n=t.$options,r=n.render,i=n._parentVnode;i&&(t.$scopedSlots=Ut(i.data.scopedSlots,t.$slots)),t.$vnode=i;try{e=r.call(t._renderProxy,t.$createElement)}catch(n){Pe(n,t,"render"),e=t._vnode}return Array.isArray(e)&&1===e.length&&(e=e[0]),e instanceof le||(e=pe()),e.parent=i,e}, _renderProxy: [circular object Object], _s: function l(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===a?JSON.stringify(e,null,2):String(e)}, _self: [circular object Object], _staticTrees: null, _t: function Jt(e,t,n,r){var i,o=this.$scopedSlots[e];o?(n=n||{},r&&(n=k(k({},r),n)),i=o(n)||t):i=this.$slots[e]||t;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},i):i}, _u: function mt(e,t,n){n=n||{$stable:!t};for(var r=0;r<e.length;r++){var i=e[r];Array.isArray(i)?mt(i,t,n):i&&(n[i.key]=i.fn)}return n}, _uid: 2, _update: function(e,t){var n=this,r=n.$el,i=n._vnode,o=gt(n);n._vnode=e,n.$el=i?n.__patch__(i,e):n.__patch__(n.$el,e,t,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)}, _v: function de(e){return new le(void 0,void 0,void 0,String(e))}, _vnode: null, _watcher: null, _watchers: [], constructor: function(e){this._init(e)} }

Console

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console

Console

Language

Doctype

Language

Extensions

script attribute

Language

Reset CSS

Keep JSFiddle running.Whitelist us in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console

Tabs:

Visual:

Embed snippet Prefer iframe?:

Behavior

General

Console

New Automatically expiring fiddles

Ability to download a fiddle

Your recent fiddles when logged out

Tailwind CSS

Code linting and formatting

JSFiddle 3.0

Import fiddles as modules

Fiddle listing shows latest version

Evaluate code into the console

`script` attribute

Keep JSFiddle running.
Whitelist us in your content blocker.