Is there a way to reuse "static UI" components in Vue without overhead?

23 Views Asked by At

Recently started using UNOCSS (taiwind-like css) and my components started bloading because of classes. And here I came up with idea of exporting components to UI wrappers, but soon found out that it adds a lot of overhed (in larger scope, remember it's just template with div and slot; 0 logic). Since I use SSR - it matters a lot because it bloats JS bundle to store components instance data in global VM and inpacts first load. I came up with inline functions that return exact html template I need to use it with v-html, but I lose control over things I can "drill" inside since it can be only some string.

MySolution.vue


<template>
 <div v-html="drillStr('Yello World')">
 </div>
</template>


const drillStr = (str)=>{
  return `
  <div class="long ass classes">
    ${str}
  </div>
  `
}

I tried the example above, expecting to hear possible solutions. There may be none actually

0

There are 0 best solutions below