serve.vue

<script>
import { defineComponent } from "vue";

export default defineComponent({
  components: {},
  data: function() {
    return {
      text: "",
      results: [],
    };
  },
  methods: {
    lookupTaxonomy: function(input, result) {
      window
        .fetch(
          "https://www.ebi.ac.uk/ena/taxonomy/rest/suggest-for-search/" + input
        )
        .then((r) => r.json())
        .then((j) => {
          result(
            j.map((x) => ({ value: x.scientificName, label: x.scientificName }))
          );
        });
    },
  },
  name: "ServeDev",
});
</script>

<template>
  <div id="app" class="container">
    <h1>Component examples</h1>
    <loading-panel>Loading...</loading-panel>
    <row-entry label="Something">Test</row-entry>
    <form-group-text-box v-model="text" label="Input data" :maxChars="12" />
    <form-group-text-field v-model="text" label="Input data" :maxChars="12" />
    <info-panel heading="Heading" title="Panel-Title">Some content</info-panel>
    <info-panel heading="Heading" title="Panel-Title" type="secondary">
      Some content
    </info-panel>
    <duration-input />
    <currency-input />
    <remote-typeahead
      placeholder="Taxon search"
      :suggestionLookup="lookupTaxonomy"
      v-model="text"
    />
  </div>
</template>