What are Fragments in Vue?

Multiple root elements in components.

What You'll Learn

What fragments are
Vue 3 vs Vue 2
Attribute inheritance

Vue 3 Fragments

Components can have multiple root elements:

code.txtVUE

<template>
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</template>

Vue 2 Limitation

code.txtVUE

<!-- Vue 2 required single root -->
<template>
  <div>
    <header>Header</header>
    <main>Main</main>
  </div>
</template>

Attribute Inheritance

code.txtVUE

<!-- With multiple roots, specify where attrs go -->
<template>
  <header>Header</header>
  <main v-bind="$attrs">Main</main>
  <footer>Footer</footer>
</template>

<script setup>
defineOptions({ inheritAttrs: false })
</script>

What is defineModel in Vue 3.4?

What is defineExpose in Vue?