Main file for functional component and render function test app

App.vue

<template>
  <div id="app">
    <FigureStandardSFC
      src="cat-basking.jpg"
      type="post-it"
      :tags="['cat','feline','fuzzy','gray']"
      @click="alertHello">Cat basking in the sun.</FigureStandardSFC>

    <FigureStandardRF
      src="red-tailed-hawk.jpg"
      type="modern"
      :tags="['bird','hawk','raptor']"
      @click="alertHello">Red-tailed hawk.</FigureStandardRF>

    <FigureFunctionalRF
      src="orange-blue-abstract.jpg"
      type="eighties"
      :tags="['orange','blue','abstract', 'metal']"
      @click="alertGoodbye">
        Orange circle, blue square.
      </FigureFunctionalRF>

    <FigureFunctionalSFC 
      src="bloodroot-leaf.jpg" 
      type="framed" 
      :tags="['leaf','plant','forest','green']"
      @click="alertGoodbye">Bloodroot leaf.</FigureFunctionalSFC>
  </div>
</template>

<script>
import FigureStandardSFC from "./components/FigureStandardSFC.vue";
import FigureFunctionalSFC from "./components/FigureFunctionalSFC.vue";
import FigureStandardRF from "./components/FigureStandardRF.js";
import FigureFunctionalRF from "./components/FigureFunctionalRF.js";

export default {
  name: "app",
  components: {
    FigureStandardSFC,
    FigureFunctionalSFC,
    FigureStandardRF,
    FigureFunctionalRF
  },
  methods: {
    alertHello(){
      alert("HELLO!")
    },
    alertGoodbye(){
      alert("Bye.")
    }
  }
};
</script>

<style>
 /* see https://github.com/nabrown/vue-functional-examples/blob/master/src/App.vue for all styles */ 
 ...
</style>