title: How to use duplicate named slots in Vue
body: <p>I am working on a wrapped component for the v-stepper in Vuetify.  In this case, i want the user to define a slot when using the component and then i will use that slot name to build out the steps.</p>
  
  <p>I need to have this slot exist for both a desktop view and a mobile view.  I tried using v-if to hide if mobile or not, but that caused other issues, so I went with v-show, but that gives me an error in developer console:</p>
  
  <blockquote>
    <p>Duplicate presence of slot "page6" found in the same render tree -
    this will likely cause render errors.</p>
  </blockquote>
  
  <p><strong>Here is how the component is structured</strong> Note that these are in the same <a href="https://github.com/jasonwilczak/vuetify-simple-wizard/blob/master/src/components/SimpleWizard.vue" rel="nofollow noreferrer">.vue file</a></p>
  
  <p>Desktop snippet</p>
  
  <pre><code>&lt;v-stepper-items&gt;
      &lt;v-stepper-content v-for="(item,index) in steps" :key="index" :step="index+1"&gt;
        &lt;slot :name="item.slot"&gt;&lt;/slot&gt;
      &lt;/v-stepper-content&gt;
    &lt;/v-stepper-items&gt;
  </code></pre>
  
  <p>Mobile snippet</p>
  
  <pre><code>&lt;v-stepper-content :key="`${index}-stepContent-mobile`" :step="index+1"&gt;
      &lt;slot :name="item.slot"&gt;&lt;/slot&gt;
    &lt;/v-stepper-content&gt;
  </code></pre>
  
  <p><strong>I tried doing a slot scope, but that doesn't seem to apply here</strong></p>
  
  <pre><code>&lt;v-stepper-items&gt;
      &lt;v-stepper-content v-for="(item,index) in steps" :key="index" :step="index+1"&gt;
        &lt;template :slot-scope="item.slot"&gt;&lt;slot :name="item.slot"&gt;&lt;/slot&gt;&lt;/template&gt;
      &lt;/v-stepper-content&gt;
    &lt;/v-stepper-items&gt;
  </code></pre>
  
  <p><strong>This is how the user would setup the slot when using the component</strong> which can be seen <a href="https://github.com/jasonwilczak/vuetify-simple-wizard/blob/master/dev/App.vue" rel="nofollow noreferrer">here</a></p>
  
  <pre><code> &lt;div slot="page5"&gt;
      &lt;h4&gt;Step 3&lt;/h4&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>So the key here is that the user sets up one slot when using the component, but the component puts that slot in 2 places in the .vue file, one in the desktop section and one in the mobile section.  It needs to have the same name, however, as it's effectively the same slot...</p>
  
  <p>Here is my github project with the code, you can pull it down and run <code>npm install</code> and then <code>npm run dev</code> to see it in action: <a href="https://github.com/jasonwilczak/vuetify-simple-wizard" rel="nofollow noreferrer" title="Vuetify-Simple-Wizard">Vuetify-Simple-Wizard</a></p>