In Vue, can I transfer props?

Imagine I have a <progress-bar> UI component and I want to create an <app-progress-bar> component that is the same as the <progress-bar> but with some style tweaks.

AppProgressBar.vue:

<template> <progress-bar class="app-progress-bar"></progress-bar> </template>

This will break because <progress-bar> requires a percent prop. So I can pass it in:

<progress-bar class="app-progress-bar" percent="percent"></progress-bar>

This seems fine, but is brittle when <progress-bar> has many props. Can I simply pass through all props? Theoretical syntax:

<progress-bar class="app-progress-bar" {...props}></progress-bar>

Which is similar to React/JSX.

Answer

After researching this, I don’t think it’s possible. Instead, you can extend a component and put an extraClass key on data or computed:

import ProgressBar from './ProgressBar'

export default {
  extends: ProgressBar,
  data() {
    return { extraClass: 'app-progress-bar' }
  }
}

ProgressBar.vue:

<template>
  <div class="progress-bar" :class="extraClass">...</div>
</template>

This isn’t as clean or flexible as React, but it works.