how best to compose a component rather than wrap it

[oliver-sanders]

Hi Vue community 👋,

I have two components where one wraps the other, adding a little to the template and passing through the props unchanged. I would like to avoid wrapping the component for efficiency reasons and would like to know what's the best practice for doing this.

The Problem:

The reason I use a wrapper is because the component being wrapped is an SVG component, for use within <svg /> tags. The wrapper, wraps this in <svg /> so it can be used in HTML.

Here's a reduced example:

SVGComponent:

<template>
  <g>
    <!-- Some SVG template code -->
  </g>
</template>

HTMLComponent:

<template>
  <svg>
    <!-- wrap the SVG component for ease of use in HTML applications -->
    <SVGComponent :prop="prop" />
  </svg>
<template>

This is great for maintenance, as it allows me to reuse the SVG component in HTML without having to duplicate any of the template code, methods, props, etc.

<!-- use in HTML -->
<div v-for="x in items">
  <HTMLComponent :prop="x" />
</div>

<!-- use in SVG -->
<svg>
  <g v-for="x in items">
    <SVGComponent :prop="x" />
  </g>
</svg>

But, this approach is not so good for efficiency, because the HTML component ends up with one reactive component wrapping another reactive component.

• HTMLComponent
  • SVGComponent

This section of the docs outlines the issue:

Sometimes we may create renderless components or higher-order components (i.e. components that render other components with extra props) for better abstraction or code organization. While there is nothing wrong with this, do keep in mind that component instances are much more expensive than plain DOM nodes, and creating too many of them due to abstraction patterns will incur performance costs.

-- https://vuejs.org/guide/best-practices/performance.html#avoid-unnecessary-component-abstractions

The Question:

So I would like to find a way to define the HTML component from the SVG component without wrapping it in the hope of achieving both maintainability and performance.

Context:

• Vue 3
• Options API

What approach would you good folks recommend for this?

• Mixins?
• defineComponent?
• Composition API?
• Something else?

---

defineComponent solution attempt:

<script>
import { defineComponent } from 'vue'
import SVGComponent from '@/components/SVGComponent.vue'

export default defineComponent({
  name: 'HTMLComponent',
  // inherit props, methods & computed 
  props: SVGComponent.props,
  methods: SVGComponent.methods,
  computed: SVGComponent.computed,
  // wrap the template (this bit doesn't work)
  template: `<svg>${{ SVGComponent.template }}</svg>`,
})