ES6 friendly Vue setup. Meant to be used with gulp + babel.

.babelrc

{
  "presets": [
    "@babel/env",
    "@vue/babel-preset-jsx",
    [
      "babel-preset-minify", {
        "mangle": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

es6-vue.js

Vue.component('hero-banner', {
  data() {
    return {
      loaded: false
    }
  },
  props: {
    src: String
  },
  mounted() {
    this.image = new Image()
    this.image.src = this.src
    this.image.onload = () => {
    this.loaded = true
    }
  },
  render() {
    let content = <spinner classes={['spinner-hero']} />
    if (this.loaded) {
      content = (
        <div id="hero-banner"
          style={{ backgroundImage: `url(${this.src})` }}
        >
          <p>Talking Text</p>
        </div>
      )
    }

    return (
      <div id="hero-wrapper">
        <transition name="fade">
          { content }
        </transition>
      </div>
    )
  }
})

new Vue({
  el: "#page"
})