General setup for using datatables with Vue 3 and Vue CLI.

creativeone

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: $(...).DataTable is not a function
Description of problem: I keep getting Datatable is not a function

colin

That suggests you haven't included the DataTables library files - try the Download page as that's an easy way to get the libraries.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

creativeone

This is a link to a test case in codepen: https://codepen.io/reefboy/pen/JjpPomj
So I imported jquery and datatables in the script tag.

allan

When importing as a CommonJS module, you need to call the function that is imported (docs). So in this case you want:

import $ from "https://cdn.skypack.dev/jquery@3.6.0";
import datatablesNet from "https://cdn.skypack.dev/datatables.net@1.11.5";

datatablesNet(window, $);

Then $().DataTable() will be available.

Note that you will also want to change your life cycle hook to be mounted rather than setup, since the table isn't in the DOM at the point setup is called.

Allan