{"id":67721,"date":"2019-07-03T04:19:37","date_gmt":"2019-07-03T11:19:37","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/"},"modified":"2019-07-03T04:19:37","modified_gmt":"2019-07-03T11:19:37","slug":"using-slots-in-vue-js","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/","title":{"rendered":"Using Slots In Vue.js"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/using-slots-vue-js\/\"><title>Using Slots In Vue.js<\/title><\/p>\n<article>\n<header>\n<h1>Using Slots In Vue.js<\/h1>\n<address>Joseph Zimmerman<\/address>\n<p>                  <time datetime=\"2019-07-03T12:30:59+02:00\">2019-07-03T12:30:59+02:00<\/time><time datetime=\"2019-07-03T11:03:07+00:00\">2019-07-03T11:03:07+00:00<\/time><\/header>\n<p>With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are slots truly capable of?<\/p>\n<p>If you\u2019re new to Vue or haven\u2019t seen the changes from version 2.6, read on. Probably the best resource for learning about slots is <a href=\"https:\/\/vuejs.org\/v2\/guide\/components-slots.html\">Vue\u2019s own documentation<\/a>, but I\u2019ll try to give a rundown here.<\/p>\n<h3>What Are Slots?<\/h3>\n<p>Slots are a mechanism for Vue components that allows you to compose your components in a way other than the strict parent-child relationship. Slots give you an outlet to place content in new places or make components more generic. The best way to understand them is to see them in action. Let\u2019s start with a simple example:<\/p>\n<pre><code>\/\/ frame.vue\n<template>\n  <div class=\"frame\">\n    <slot><\/slot>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n<p>This component has a wrapper <code>div<\/code>. Let\u2019s pretend that <code>div<\/code> is there to create a stylistic frame around its content. This component is able to be used generically to wrap a frame around any content you want. Let\u2019s see what it looks like to use it. The <code>frame<\/code> component here refers to the component we just made above.<\/p>\n<pre><code>\/\/ app.vue\n<template>\n  <frame><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/an-image.jpg?w=900\"><\/frame>\n<\/template>\n<\/code><\/pre>\n<p>The content that is between the opening and closing <code>frame<\/code> tags will get inserted into the <code>frame<\/code> component where the <code>slot<\/code> is, replacing the <code>slot<\/code> tags. This is the most basic way of doing it. You can also specify default content to go into a slot simply by filling it in:<\/p>\n<div>\n<pre><code>\/\/ frame.vue\n<template>\n  <div class=\"frame\">\n    <slot>This is the default content if nothing gets specified to go here<\/slot>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<p>So now if we use it like this instead:<\/p>\n<pre><code>\/\/ app.vue\n<template>\n  <frame \/>\n<\/template>\n<\/code><\/pre>\n<p>The default text of \u201cThis is the default content if nothing gets specified to go here\u201d will show up, but if we use it as we did before, the default text will be overridden by the <code>img<\/code> tag.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h4>Multiple\/Named Slots<\/h4>\n<p>You can add multiple slots to a component, but if you do, all but one of them is required to have a name. If there is one without a name, it is the default slot. Here\u2019s how you create multiple slots:<\/p>\n<div>\n<pre><code>\/\/ titled-frame.vue\n<template>\n  <div class=\"frame\">\n    <header><h2><slot name=\"header\">Title<\/slot><\/h2><\/header>\n    <slot>This is the default content if nothing gets specified to go here<\/slot>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<p>We kept the same default slot, but this time we added a slot named <code>header<\/code> where you can enter a title. You use it like this:<\/p>\n<pre><code>\/\/ app.vue\n<template>\n  <titled-frame>\n    <template v-slot:header>\n      <!-- The code below goes into the header slot -->\n      My Image\u2019s Title\n    <\/template>\n    <!-- The code below goes into the default slot -->\n    <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/an-image.jpg?w=900\">\n  <\/titled-frame>\n<\/template>\n<\/code><\/pre>\n<p>Just like before, if we want to add content to the default slot, just put it directly inside the <code>titled-frame<\/code> component. To add content to a named slot, though, we needed to wrap the code in a <code>template<\/code> tag with a <code>v-slot<\/code> directive. You add a colon (<code>:<\/code>) after <code>v-slot<\/code> and then write the name of the slot you want the content to be passed to. Note that <code>v-slot<\/code> is new to Vue 2.6, so if you\u2019re using an older version, you\u2019ll need to read the <a href=\"https:\/\/vuejs.org\/v2\/guide\/components-slots.html#Deprecated-Syntax\">docs about the deprecated slot syntax<\/a>.<\/p>\n<h4>Scoped Slots<\/h4>\n<p>One more thing you\u2019ll need to know is that slots can pass data\/functions down to their children. To demonstrate this, we\u2019ll need a completely different example component with slots, one that\u2019s even more contrived than the previous one: let\u2019s sorta copy the example from the docs by creating a component that supplies the data about the current user to its slots:<\/p>\n<pre><code>\/\/ current-user.vue\n<template>\n  <span>\n    <slot v-bind:user=\"user\">\n      {{ user.lastName }}\n    <\/slot>\n  <\/span>\n<\/template>\n\n<script>\nexport default {\n  data () {\n    return {\n      user: ...\n    }\n  }\n}\n<\/script>\n<\/code><\/pre>\n<p>This component has a property called <code>user<\/code> with details about the user. By default, the component shows the user\u2019s last name, but note that it is using <code>v-bind<\/code> to bind the user data to the slot. With that, we can use this component to provide the user data to its descendant:<\/p>\n<div>\n<pre><code>\/\/ app.vue\n<template>\n  <current-user>\n    <template v-slot:default=\"slotProps\">{{ slotProps.user.firstName }}<\/template>    \n  <\/current-user>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<p>To get access to the data passed to the slot, we specify the name of the scope variable with the value of the <code>v-slot<\/code> directive.<\/p>\n<p>There are a few notes to take here:<\/p>\n<ul>\n<li>We specified the name of <code>default<\/code>, though we don\u2019t need to for the default slot. Instead we could just use <code>v-slot=\"slotProps\"<\/code>.<\/li>\n<li>You don\u2019t need to use <code>slotProps<\/code> as the name. You can call it whatever you want.<\/li>\n<li>If you\u2019re only using a default slot, you can skip that inner <code>template<\/code> tag and put the <code>v-slot<\/code> directive directly onto the <code>current-user<\/code> tag.<\/li>\n<li>You can use object destructuring to create direct references to the scoped slot data rather than using a single variable name. In other words, you can use <code>v-slot=\"{user}\"<\/code> instead of <code>v-slot=\"slotProps\"<\/code> and then you can use <code>user<\/code> directly instead of <code>slotProps.user<\/code>.<\/li>\n<\/ul>\n<p>Taking those notes into account, the above example can be rewritten like this:<\/p>\n<pre><code>\/\/ app.vue\n<template>\n  <current-user v-slot=\"{user}\">\n    {{ user.firstName }}\n  <\/current-user>\n<\/template>\n<\/code><\/pre>\n<p>A couple more things to keep in mind:<\/p>\n<ul>\n<li>You can bind more than one value with <code>v-bind<\/code> directives. So in the example, I could have done more than just <code>user<\/code>.<\/li>\n<li>You can pass functions to scoped slots too. Many libraries use this to provide reusable functional components as you\u2019ll see later.<\/li>\n<li><code>v-slot<\/code> has an alias of <code>#<\/code>. So instead of writing <code>v-slot:header=\"data\"<\/code>, you can write <code>#header=\"data\"<\/code>. You can also just specify <code>#header<\/code> instead of <code>v-slot:header<\/code> when you\u2019re not using scoped slots. As for default slots, you\u2019ll need to specify the name of <code>default<\/code> when you use the alias. In other words, you\u2019ll need to write <code>#default=\"data\"<\/code> instead of <code>#=\"data\"<\/code>.<\/li>\n<\/ul>\n<p>There are a few more minor points you can learn about from <a href=\"https:\/\/vuejs.org\/v2\/guide\/components-slots.html\">the docs<\/a>, but that should be enough to help you understand what we\u2019re talking about in the rest of this article.<\/p>\n<div><\/div>\n<h3>What Can You Do With Slots?<\/h3>\n<p>Slots weren\u2019t built for a single purpose, or at least if they were, they\u2019ve evolved way beyond that original intention to be a powerhouse tool for doing many different things.<\/p>\n<h4>Reusable Patterns<\/h4>\n<p>Components were always designed to be able to be reused, but some patterns aren\u2019t practical to enforce with a single \u201cnormal\u201d component because the number of <code>props<\/code> you\u2019ll need in order to customize it can be excessive or you\u2019d need to pass large sections of content and potentially other components through the <code>props<\/code>. Slots can be used to encompass the \u201coutside\u201d part of the pattern and allow other HTML and\/or components to placed inside of them to customize the \u201cinside\u201d part, allowing the component with slots to define the pattern and the components injected into the slots to be unique.<\/p>\n<p>For our first example, let\u2019s start with something simple: a button. Imagine you and your team are using <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>*. With Bootstrap, your buttons are often strapped with the base `btn` class and a class specifying the color, such as `btn-primary`. You can also add a size class, such as `btn-lg`.<\/p>\n<p>* I neither encourage nor discourage you from doing this, I just needed something for my example and it\u2019s pretty well known.<\/p>\n<p>Let\u2019s now assume, for simplicity\u2019s sake that your app\/site always uses <code>btn-primary<\/code> and <code>btn-lg<\/code>. You don\u2019t want to always have to write all three classes on your buttons, or maybe you don\u2019t trust a rookie to remember to do all three. In that case, you can create a component that automatically has all three of those classes, but how do you allow customization of the content? A <code>prop<\/code> isn\u2019t practical because a <code>button<\/code> tag is allowed to have all kinds of HTML in it, so we should use a slot.<\/p>\n<pre><code><!-- my-button.vue -->\n<template>\n  <button class=\"btn btn-primary btn-lg\">\n    <slot>Click Me!<\/slot>\n  <\/button>\n<\/template>\n<\/code><\/pre>\n<p>Now we can use it everywhere with whatever content you want:<\/p>\n<div>\n<pre><code><!-- somewhere else, using my-button.vue -->\n<template>\n  <my-button>\n    <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/awesome-icon.jpg?w=900\"> SMASH THIS BUTTON TO BECOME AWESOME FOR ONLY $500!!!\n  <\/my-button>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<p>Of course, you can go with something much bigger than a button. Sticking with Bootstrap, let\u2019s look at a modal, or least the HTML part; I won\u2019t be going into functionality\u2026 yet.<\/p>\n<div>\n<pre><code><!-- my-modal.vue -->\n<template>\n<div class=\"modal\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <slot name=\"header\"><\/slot>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">\u00d7<\/span>\n        <\/button>\n      <\/div>\n      <div class=\"modal-body\">\n        <slot name=\"body\"><\/slot>\n      <\/div>\n      <div class=\"modal-footer\">\n        <slot name=\"footer\"><\/slot>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<p>Now, let\u2019s use this:<\/p>\n<div>\n<pre><code><!-- somewhere else, using my-modal.vue -->\n<template>\n  <my-modal>\n    <template #header><!-- using the shorthand for `v-slot` -->\n      <h5>Awesome Interruption!<\/h5>\n    <\/template>\n    <template #body>\n      <p>We interrupt your use of our application to\n      let you know that this application is awesome \n      and you should continue using it every day for \n      the rest of your life!<\/p>\n    <\/template>\n    <template #footer>\n      <em>Now back to your regularly scheduled app usage<\/em>\n    <\/template>\n  <\/my-modal>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<p>The above type of use case for slots is obviously very useful, but it can do even more.<\/p>\n<h4>Reusing Functionality<\/h4>\n<p>Vue components aren\u2019t all about the HTML and CSS. They\u2019re built with JavaScript, so they\u2019re also about functionality. Slots can be useful for creating <em>functionality<\/em> once and using it in multiple places. Let\u2019s go back to our modal example and add a function that closes the modal:<\/p>\n<div>\n<pre><code><!-- my-modal.vue -->\n<template>\n<div class=\"modal\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <slot name=\"header\"><\/slot>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">\u00d7<\/span>\n        <\/button>\n      <\/div>\n      <div class=\"modal-body\">\n        <slot name=\"body\"><\/slot>\n      <\/div>\n      <div class=\"modal-footer\">\n        <!--\n          using `v-bind` shorthand to pass the `closeModal` method\n          to the component that will be in this slot\n        -->\n        <slot name=\"footer\" :closeModal=\"closeModal\"><\/slot>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/template>\n\n<script>\nexport default {\n  \/\/...\n  methods: {\n    closeModal () {\n      \/\/ Do what needs to be done to close the modal... and maybe remove it from the DOM\n    }\n  }\n}\n<\/script>\n<\/code><\/pre>\n<\/div>\n<p>Now when you use this component, you can add a button to the footer that can close the modal. Normally, in the case of a Bootstrap modal, you could just add <code>data-dismiss=\"modal\"<\/code> to a button, but we want to hide Bootstrap specific things away from the components that will be slotting into this modal component. So we pass them a function they can call and they are none the wiser about Bootstrap\u2019s involvement:<\/p>\n<div>\n<pre><code><!-- somewhere else, using my-modal.vue -->\n<template>\n  <my-modal>\n    <template #header><!-- using the shorthand for `v-slot` -->\n      <h5>Awesome Interruption!<\/h5>\n    <\/template>\n    <template #body>\n      <p>We interrupt your use of our application to\n      let you know that this application is awesome \n      and you should continue using it every day for \n      the rest of your life!<\/p>\n    <\/template>\n    <!-- pull in `closeModal` and use it in a button\u2019s click handler -->\n    <template #footer=\"{closeModal}\">\n      <button @click=\"closeModal\">\n        Take me back to the app so I can be awesome\n      <\/button>\n    <\/template>\n  <\/my-modal>\n<\/template>\n<\/code><\/pre>\n<\/div>\n<h4>Renderless Components<\/h4>\n<p>And finally, you can take what you know about using slots to pass around reusable functionality and strip practically all of the HTML and just use the slots. That\u2019s essentially what a renderless component is: a component that provides only functionality without any HTML.<\/p>\n<p>Making components truly renderless can be a little tricky because you\u2019ll need to write <code>render<\/code> functions rather than using a template in order to remove the need for a root element, but it may not always be necessary. Let\u2019s take a look at a simple example that does let us use a template first, though:<\/p>\n<pre><code><template>\n  <transition name=\"fade\" v-bind=\"$attrs\" v-on=\"$listeners\">\n    <slot><\/slot>\n  <\/transition>\n<\/template>\n<style>\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s;\n}\n.fade-enter, .fade-leave-to {\n  opacity: 0;\n}\n<\/style>\n<\/code><\/pre>\n<p>This is an odd example of a renderless component because it doesn\u2019t even have any JavaScript in it. That\u2019s mostly because we\u2019re just creating a pre-configured reusable version of a built-in renderless function: <code>transition<\/code>.<\/p>\n<p>Yup, Vue has built-in renderless components. This particular example is taken from an article on <a href=\"https:\/\/vuejsdevelopers.com\/2018\/02\/26\/vue-js-reusable-transitions\/\">reusable transitions by Cristi Jora<\/a> and shows a simple way to create a renderless component that can standardize the transitions used throughout your application. Cristi\u2019s article goes into a lot more depth and shows some more advanced variations of reusable transitions, so I recommend checking it out.<\/p>\n<div><\/div>\n<p>For our other example, we\u2019ll create a component that handles switching what is shown during the different states of a Promise: pending, successfully resolved, and failed. It\u2019s a common pattern and while it doesn\u2019t require a lot of code, it can muddy up a lot of your components if the logic isn\u2019t pulled out for reusability.<\/p>\n<div>\n<pre><code><!-- promised.vue -->\n<template>\n  <span>\n    <slot  name=\"rejected\"  v-if=\"error\" :error=\"error\"><\/slot>\n    <slot  name=\"resolved\"  v-else-if=\"resolved\" :data=\"data\"><\/slot>\n    <slot  name=\"pending\"  v-else><\/slot>\n  <\/span>\n<\/template>\n\n<script>\nexport  default {\n  props: {\n    promise:  Promise\n  },\n\n  data: () => ({\n    resolved:  false,\n    data:  null,\n    error:  null\n  }),  \n\n  watch: {\n    promise: {\n      handler (promise) {\n        this.resolved  =  false\n        this.error  =  null\n\n        if (!promise) {\n          this.data  =  null\n          return\n        }\n\n        promise.then(data  => {\n          this.data  =  data\n          this.resolved  =  true\n        })\n        .catch(err  => {\n          this.error  =  err\n          this.resolved  =  true\n        })\n      },\n      immediate:  true\n    }\n  }\n}\n<\/script>\n<\/code><\/pre>\n<\/div>\n<p>So what is going on here? First, note that we are receiving a prop called <code>promise<\/code> that is a <code>Promise<\/code>. In the <code>watch<\/code> section we watch for changes to the promise and when it changes (or immediately on component creation thanks to the <code>immediate<\/code> property) we clear the state, and call <code>then<\/code> and <code>catch<\/code> on the promise, updating the state when it either finishes successfully or fails.<\/p>\n<p>Then, in the template, we show a different slot based on the state. Note that we failed to keep it truly renderless because we needed a root element in order to use a template. We\u2019re passing <code>data<\/code> and <code>error<\/code> to the relevant slot scopes as well.<\/p>\n<p>And here\u2019s an example of it being used:<\/p>\n<pre><code><template>\n  <div>\n    <promised :promise=\"somePromise\">\n      <template #resolved=\"{ data }\">\n        Resolved: {{ data }}\n      <\/template>\n      <template #rejected=\"{ error }\">\n        Rejected: {{ error }}\n      <\/template>\n      <template #pending>\n        Working on it...\n      <\/template>\n    <\/promised>\n  <\/div>\n<\/template>\n...\n<\/code><\/pre>\n<p>We pass in <code>somePromise<\/code> to the renderless component. While we\u2019re waiting for it to finish, we\u2019re displaying \u201cWorking on it\u2026\u201d thanks to the <code>pending<\/code> slot. If it succeeds we display \u201cResolved:\u201d and the resolution value. If it fails we display \u201cRejected:\u201d and the error that caused the rejection. Now we no longer need to track the state of the promise within this component because that part is pulled out into its own reusable component.<\/p>\n<p>So, what can we do about that <code>span<\/code> wrapping around the slots in <code>promised.vue<\/code>? To remove it, we\u2019ll need to remove the <code>template<\/code> portion and add a <code>render<\/code> function to our component:<\/p>\n<pre><code>render () {\n  if (this.error) {\n    return this.$scopedSlots['rejected']({error: this.error})\n  }\n\n  if (this.resolved) {\n    return this.$scopedSlots['resolved']({data: this.data})\n  }\n\n  return this.$scopedSlots['pending']()\n}\n<\/code><\/pre>\n<p>There isn\u2019t anything too tricky going on here. We\u2019re just using some <code>if<\/code> blocks to find the state and then returning the correct scoped slot (via <code>this.$scopedSlots['SLOTNAME'](...)<\/code>) and passing the relevant data to the slot scope. When you\u2019re not using a template, you can skip using the <code>.vue<\/code> file extension by pulling the JavaScript out of the <code>script<\/code> tag and just plunking it into a <code>.js<\/code> file. This should give you a very slight performance bump when compiling those Vue files.<\/p>\n<p>This example is a stripped-down and slightly tweaked version of <a href=\"https:\/\/github.com\/posva\/vue-promised\">vue-promised<\/a>, which I would recommend over using the above example because they cover over some potential pitfalls. There are plenty of other great examples of renderless components out there too. <a href=\"https:\/\/baleada.netlify.com\/docs\">Baleada<\/a> is an entire library full of renderless components that provide useful functionality like this. There\u2019s also <a href=\"https:\/\/github.com\/Akryum\/vue-virtual-scroller\">vue-virtual-scroller<\/a> for controlling the rendering of list item based on what is visible on the screen or <a href=\"https:\/\/github.com\/LinusBorg\/portal-vue\">PortalVue<\/a> for \u201cteleporting\u201d content to completely different parts of the DOM.<\/p>\n<h3>I\u2019m Out<\/h3>\n<p>Vue\u2019s slots take component-based development to a whole new level, and while I\u2019ve demonstrated a lot of great ways slots can be used, there are countless more out there. What great idea can you think of? What ways do you think slots could get an upgrade? If you have any, make sure to bring your ideas to the Vue team. God bless and happy coding.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/logo-red-2.png?w=900\" alt=\"Smashing Editorial\"><span>(dm, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using Slots In Vue.js Using Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00 With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects&#8230;.<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":67722,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-67721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Using Slots In Vue.js | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-07-03T11:19:37+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-07-03T11:19:37+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Using Slots In Vue.js | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#article\",\"name\":\"Using Slots In Vue.js | Design for Immersive Technologies\",\"headline\":\"Using Slots In Vue.js\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/an-image.jpg?fit=%2C&ssl=1\"},\"datePublished\":\"2019-07-03T04:19:37-07:00\",\"dateModified\":\"2019-07-03T04:19:37-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#listItem\",\"name\":\"Using Slots In Vue.js\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#listItem\",\"position\":3,\"name\":\"Using Slots In Vue.js\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/\",\"name\":\"Using Slots In Vue.js | Design for Immersive Technologies\",\"description\":\"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/an-image.jpg?fit=%2C&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#mainImage\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/07\\\/using-slots-in-vue-js\\\/#mainImage\"},\"datePublished\":\"2019-07-03T04:19:37-07:00\",\"dateModified\":\"2019-07-03T04:19:37-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Using Slots In Vue.js | Design for Immersive Technologies","description":"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#article","name":"Using Slots In Vue.js | Design for Immersive Technologies","headline":"Using Slots In Vue.js","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/an-image.jpg?fit=%2C&ssl=1"},"datePublished":"2019-07-03T04:19:37-07:00","dateModified":"2019-07-03T04:19:37-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#listItem","name":"Using Slots In Vue.js"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#listItem","position":3,"name":"Using Slots In Vue.js","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/","name":"Using Slots In Vue.js | Design for Immersive Technologies","description":"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/an-image.jpg?fit=%2C&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#mainImage"},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/#mainImage"},"datePublished":"2019-07-03T04:19:37-07:00","dateModified":"2019-07-03T04:19:37-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Using Slots In Vue.js | Design for Immersive Technologies","og:description":"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/","article:published_time":"2019-07-03T11:19:37+00:00","article:modified_time":"2019-07-03T11:19:37+00:00","twitter:card":"summary","twitter:title":"Using Slots In Vue.js | Design for Immersive Technologies","twitter:description":"Using Slots In Vue.jsUsing Slots In Vue.js Joseph Zimmerman 2019-07-03T12:30:59+02:002019-07-03T11:03:07+00:00With the recent release of Vue 2.6, the syntax for using slots has been made more succinct. This change to slots has gotten me re-interested in discovering the potential power of slots to provide reusability, new features, and clearer readability to our Vue-based projects. What are"},"aioseo_meta_data":{"post_id":"67721","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 19:07:11","updated":"2026-09-01 14:21:06","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUsing Slots In Vue.js\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Using Slots In Vue.js","link":"https:\/\/www.taterboy.com\/blog\/2019\/07\/using-slots-in-vue-js\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-hCh","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/07\/an-image.jpg?fit=%2C&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/67721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=67721"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/67721\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/67722"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=67721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=67721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=67721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}