How do I create reusable template parts in Vue.js?

Question

I have a component with a few blocks that repeat throughout the template. These blocks may have a conditional or two and might call some methods in event handlers, but mostly they're pretty simple.

It is really not worth creating an entire, separate component for a few elements, plus passing around data and methods isn't exactly trivial, making the component more difficult to maintain. So these blocks won't be used in any other components.

I really need to be able to define a "subcomponent" or "template" inside this component for these blocks. I don't know if this is possible yet. Has anyone figured out a clean solution for this?

vueuse.org/core/createReusableTemplate

n0099
– n0099

2024-03-12 19:47:45 +00:00
Commented Mar 12, 2024 at 19:47 — n0099
– n0099, Commented Mar 12, 2024 at 19:47

tony19 · Accepted Answer · 2022-01-24 07:20:42Z

9

Components can be defined as render functions, and this is especially easy with JSX:

const ComponentA = props => (
  <div>
    <label>{props.label} <input type="text" /></label>
  </div>
)

You could declare multiple subcomponents as render functions (or full component definition objects if needed) in the same file, and reuse them in the component's template. Vue 3's <script setup> block also helps to make this more concise:

<script lang="jsx" setup>
const SubComponentA = (props) => (
    <div>
      <label>{props.label}</label>
      <input type="number" />
    </div>
)
const SubComponentB = (props) => (
    <div>
      <label>{props.label}</label>
      <textarea />
    </div>
)
</script>

<template>
  <SubComponentA label="Label 1" />
  <SubComponentB label="Label 2" />
  <SubComponentA label="Label 3" />
  <SubComponentB label="Label 4" />
</template>

demo

answered Jan 24, 2022 at 7:20

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Randy Hall Over a year ago

What does the scope look like for these? Does it only operate with what's passed to it like a normal component or does it have access to the parent component context?

tony19 Over a year ago

In <script setup>, the subcomponents can have access to the parent component context (demo).

Collectives™ on Stack Overflow

How do I create reusable template parts in Vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related