<div id="app">
  <heading :level="1">Hello world!</heading>
  <heading :level="2">Hello world!</heading>
  <heading :level="3">Hello world!</heading>
  <heading :level="4">Hello world!</heading>
  <heading :level="5">Hello world!</heading>
  <heading :level="6">Hello world!</heading>
</div>
body {
  background-color: #F9FAFB;
}

.heading {
  color: #1F2937;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
Vue.component('heading', {
  props: {
    level: {
      type: Number,
      default: 1,
      required: true,
    },
  },
  render(createElement) {
    return createElement(
      `h${this.level}`, // tag name
      { class: `heading h${this.level}` }, // attributes
      this.$slots.default // array of children
    )
  },
})

var app = new Vue({
  el: '#app'
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js