Charts & Plugins

Charts, tables, editors, date pickers, calendars, maps and drag-and-drop ship as optional wrapper components under @adminlte/vue/plugins. Each lazy-loads its underlying library and is SSR-safe, so nothing extra lands in your bundle until you actually use it.

How plugin components work

The plugin libraries are declared as optional peer dependencies — install only the ones you need:

# install just what you use
npm install apexcharts tabulator-tables quill flatpickr tom-select \
  sortablejs jsvectormap @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

In Nuxt the plugin components are auto-registered. In plain Vue, import them from the /plugins entry point:

import { LteApexChart, LteDatatable, LteCalendar } from '@adminlte/vue/plugins'

Available plugin components

ApexCharts

<script setup lang="ts">
import { LteApexChart } from '@adminlte/vue/plugins' // not needed in Nuxt

const series = [{ name: 'Revenue', data: [31, 40, 28, 51, 42, 109, 100] }]
const options = {
  xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] },
}
</script>

<template>
  <LteCard title="Revenue">
    <LteApexChart type="area" :series="series" :options="options" :height="300" />
  </LteCard>
</template>

Pass extra options through options (merged over the chart's type/height/series). Arrays are watched shallowly by default — replace the series array immutably to trigger an update, or set deep-watch for in-place mutations.

FullCalendar

<script setup lang="ts">
import { LteCalendar } from '@adminlte/vue/plugins'

const events = [{ title: 'Launch', date: '2026-07-01' }]
</script>

<template>
  <LteCalendar
    :events="events"
    initial-view="dayGridMonth"
    @event-click="(arg) => console.log(arg.event.title)"
  />
</template>

Tabulator data table

<script setup lang="ts">
import { LteDatatable } from '@adminlte/vue/plugins'

const columns = [{ title: 'Name', field: 'name' }, { title: 'Age', field: 'age' }]
const rows = [{ name: 'Ada', age: 36 }, { name: 'Linus', age: 54 }]
</script>

<template>
  <LteDatatable :columns="columns" :data="rows" />
</template>