19. DataTables library not set (Vue)

When using the Vue component for DataTables, you must specify the DataTables library to be used by the component. If that is not done, the error:

DataTables library not set

will occur when the component is loaded.

Meaning

DataTables provides a wide range of extensions in add functionality to the core package and also support for many different styling libraries. To allow the Vue3 component to work with any combination of the extensions and styling frameworks, you must import DataTables into the context you are using, and then assign the resulting library to the Vue component.

For example the most simple use case is:

import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net';
 
DataTable.use(DataTablesLib);

To use with an extension such as Select, use:

import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net';
import 'datatables.net-select';
 
DataTable.use(DataTablesLib);

And for the Bootstrap 5 styling framework (note the -bs5 added to the DataTables core and Select packages):

import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net-bs5';
import 'datatables.net-select-bs5';
 
DataTable.use(DataTablesLib);

Resolution

To resolve this error make sure you assign a DataTables library to the Vue 3 component through the .use() method.

Note that prior to v2 of the Vue 3 component for DataTables, the usage was different, due to the use of CommonJS loaders. If you were using v1.x of this component you will need to update how you import the component to this new style.