We’d like to reuse our code as much as possible, so we’d often extract duplicated parts into components. However, when moving code into a separate component, you lose access to the local variables, and defining <code>props</code> and <code>emits</code> for them can be tedious at times.
Take this simple sign-up form:
<pre><code class="language-html">&lt;template&gt;
 &lt;form&gt;
 &lt;div class=&quot;form-group&quot;&gt;
 &lt;label&gt;
 &lt;span&gt;Email:&lt;/span&gt;
 &lt;input type=&quot;text&quot; v-model=&quot;email&quot;/&gt;
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;div class=&quot;form-group&quot;&gt;
 &lt;label&gt;
 &lt;span&gt;Password:&lt;/span&gt;
 &lt;input type=&quot;password&quot; v-model=&quot;password&quot;/&gt;
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;div class=&quot;form-group&quot;&gt;
 &lt;label&gt;
 &lt;span&gt;Name:&lt;/span&gt;
 &lt;input type=&quot;text&quot; v-model=&quot;name&quot;/&gt;
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;/form&gt;
&lt;/template&gt;
</code></pre>
Notice that the <code>div.form-group</code> part is repeated several times. You might think, “Why not turn this into a component?” But creating a whole new <code>.vue</code> file for something so small can feel like overkill.
A much simpler solution is using the <a href="https://vueuse.org/core/createReusableTemplate/" target="_blank" rel="noopener nofollow"><code>createReusableTemplate</code></a> composable from <a href="https://vueuse.org/" target="_blank" rel="noopener nofollow">VueUse</a>. It lets you reuse parts of a template without creating a separate component each time.
Here’s how you can do it:
<pre><code class="language-html">&lt;script setup&gt;
import { createReusableTemplate } from &#x27;@vueuse/core&#x27;

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
&lt;/script&gt;

&lt;template&gt;
 &lt;DefineTemplate v-slot=&quot;{ $slots, label }&quot;&gt;
 &lt;div class=&quot;form-group&quot;&gt;
 &lt;label&gt;
 &lt;span&gt;{{ label }}:&lt;/span&gt;
 &lt;component :is=&quot;$slots.default&quot; /&gt;
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;/DefineTemplate&gt;

 &lt;form&gt;
 &lt;ReuseTemplate label=&quot;Email&quot;&gt;
 &lt;input type=&quot;text&quot;/&gt;
 &lt;/ReuseTemplate&gt;

 &lt;ReuseTemplate label=&quot;Password&quot;&gt;
 &lt;input type=&quot;password&quot; /&gt;
 &lt;/ReuseTemplate&gt;

 &lt;ReuseTemplate label=&quot;Name&quot;&gt;
 &lt;input type=&quot;text&quot;/&gt;
 &lt;/ReuseTemplate&gt;
 &lt;/form&gt;
&lt;/template&gt;
</code></pre>
Now, instead of repeating the <code>div.form-group</code> multiple times, you can reuse it easily without the hassle of creating new components. Everything stays clean and simple, with no extra files or complicated prop handling.
<a href="https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAjAAGSbEyak9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKkleDArGQMPkGWhshQCKRIBRgxGYwEQmms2GbI5XMQJPJlOpG0Q2z2hwAuswjHQDMa0KAAIJgMCTBboUCpLUGCCpIgqFQAHg0AewiAAKrQwAnUiniBRkF5pABeAA6IGAKgAJKXWNJkIwVAnSp4VAdqwA+SvmFNpqjZFRQBPIZBVkC1Dh4CjwDjsMC9-uDwep9uePsDtcp1PISDYHvAWubgxdg5oVN3Q-b3frrHarMqlRoOiT6sNsvISY0IwQUgDGkasVGGO9d2vM9wL3YZh2IcDrwzMwczzAtEG3Vc0xnPBoLTAAldkblzeNEzSM8pwAUTwCBAxXHd1zMMAAniEIwEQKdUk2YCQDAzCYIIvFiPzUiMPo1MBKI1DSLbCAOwMKcAAUIAnSI6ioOj71TRjmNCNip0gFS1JA3ixOGCSUJI1JRLXcTCIs4TC3I6sADlTg0iDtOkFi9OrTjuJMmyzLsoS0IQ4ZsJ7Z5hWkIg6C1OovNrawTAOGpFzwFRqwWat+zi7UOES0drFIiTZKDELpNSox0pUAByB0bk5OpEFq-t+xmbBkC8jAkKzCrUlbcz+sQH0VHLIrEBKwiyvstDtHsNrbHkLqVFoGjz3G5LtFq2qFqWzqvIM5BVI4UFNsQIxtt29rlq83ACDGlQtp2+xGWYSU1LMUio3IGMQDjByzlTODMNqFUpzweRWBygdSngKcgngPoKAAVlJUk3EqGA0CoLHUfRmGUyMINNinAA-UcpUJ+JPQratuBVRAOGpsAp0aanSjUpmp0XfgaHUkB+wQg8IHMPypwAFk2AxexPFRiEMVQDgOa8RaPTD90PGmuKnZAMtxjhscR5GAE50cxw20G8aBghCfGQLwDiKHZkAewAWXYSE5bPC9VdvftrzgyLmHESQZCIP9kIUxdBm0YBMLPNAVABaRJGweBGEwhWDHIJPnNIPAOw4TPsAOV7lYOIA" target="_blank" rel="noopener nofollow">View the code in the playground</a>

Hey there! Welcome to The Looop Tech - Vue.js. I’m your host IGC , your friendly neighborhood Vue.js enthusiast! Join me each week as I chat about the latest Vue.js news, share fun tips, and dive into all things Nuxt.js. It’s just me here, so if you’

Vuejs&Nuxtjs

Reuse code in Vue.js without creating new files by utilizing `createReusableTemplate` from VueUse. This approach simplifies handling redundant elements like form groups, enabling clean and efficient coding practices.

Vue Tip: Creating Components Within Components

This library is a collection of prebuilt composables that we just need to import and use, isn’t it?