JSFiddle - React, Tailwind, and code Playground

by frumpty

HTML

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
      "jquery": "https://code.jquery.com/jquery-3.6.4.min.js",
      "datatables.net-vue3": "https://unpkg.com/[email protected]/dist/datatables.net-vue3.mjs",
      "datatables.net": "https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.mjs"
    }
  }
</script>


<div id="app">{{ message }}
<h3>
My Table!
</h3>
<DataTable :data="[[1, 2], [3,5], [5,7]]" class="display">
                                <thead>
                                    <tr><th>Col 1</th><th>Col Col 2</th></tr>
                                </thead>
                            </DataTable>
</div>

<script type="module">
  import { createApp } from 'vue'
  
  //remove datatable imports to see vue working
  import {DataTable as DataTablesLib}
    from "datatables.net";
import DataTable from 'datatables.net-vue3'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>