Using for vue 3 + inertia

draw134

Hello I got this kind of error when I am using the vue-3 datatables component

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '$')
    at DataTable (jquery.dataTables.mjs:65:7)
    at Object.use (runtime-core.esm-bundler.js:3755:11)
    at setup (app.js:26:8)
    at createInertiaApp.ts:39:12
    at async j2 (createInertiaApp.ts:38:18)

Here is what I tried

my app.js

import DataTable from 'datatables.net-bs5';
import DataTablesCore from 'datatables.net-bs5';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue, Ziggy)
      .use(VueFusionCharts, FusionCharts, Column2D, FusionTheme)
      .use(DataTable, DataTablesCore)
      .mount(el)
  },
})

and in my component when I am using the table

<template>
      <DataTable :data="data" class="display">
              <thead>
                  <tr>
                      <th>A</th>
                      <th>B</th>
                  </tr>
              </thead>
      </DataTable>
</template>
<script setup>
import { defineProps, ref, onMounted } from 'vue';
const data = [
  [1, 2],
  [3, 4],
];
</script>

allan

Could you link to a test case showing the issue on Stackblitz, similar or a git repo please? Here is an example showing DataTables working in Vue. Documentation for it is available here (I note you aren't using our Vue plug-in in the code shown above).

Allan

draw134

Actually I followed the same format as on the stackblitz and I get the error

allan

Something must be different in that case. Possibly your bundler - are you using Vite?

The stackblitz works, so to be able to offer any help I'd need a way to reproduce the error.

Allan