JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="teleport">
  <section id="section-one" class="section">
    <div>
      <teleport to=".suggestions" v-if="ready">
        <span
          v-html="errorMessage"
          class="error-message"
        ></span>
      </teleport>
    </div>
  </section>
  <section id="summary" class="section">
    <div class="summary-results summaries--not-okay" v-show="getErrorState">
      <div class="suggestions">
        <!-- Teleport should go here -->
      </div>
    </div>
  </section>
</div>

JavaScript

const app = Vue.createApp({
  data() {
    return {
      errorMessage: 'hello',
      getErrorState: true,
      ready: false
    }
  },
  
  mounted () {
    this.ready = true
  }
})

app.mount('#teleport')