vuepress-starter/docs/.vuepress/theme/components/Jumbotron.vue

<template>
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-4" v-if="title">{{title}}</h1>
      <p class="lead">{{lead}}</p>
      <template v-if="link">
        <RouterLink
          v-if="!isExternal(link)"
          class="btn btn-primary btn-lg"
          :to="link"
        >
          {{linkLabel}}
        </RouterLink>
        <a class="btn btn-primary btn-lg" :href="link" role="button" target="_blank" v-else>
          {{linkLabel}}
          <OutboundLink />
        </a>
      </template>
    </div>
  </div>
</template>

<script>
import { isExternal } from '@theme/utils/index.js'

export default {
  name: 'Jumbotron',
  props: {
    title: String,
    lead: String,
    link: String,
    linkLabel: String,
    backImage: String,
  },
  watch: {
    'backImage': {
      handler (newVal) {
        if (newVal) {
          this.setBackImage(newVal)
        }
      }
    }
  },
  mounted() {
    this.setBackImage(this.backImage)
  },
  methods: {
    isExternal,
    setBackImage(img) {
      if (img && this.$el) {
        this.$el.style.backgroundImage = `url(${img})`
      }
    }
  }
}
</script>