2026-04-18 · Vue · Pillar guide

Vue 3 & Nuxt Data Grid: Install and Run Simple Table

Best for Vue 3 / Nuxt100% Free, MITComposition APIVite & Nuxt Ready

Set up a Vue 3 or Nuxt data grid with @simple-table/vue: npm install, global styles, Composition API usage, SSR notes, and links to the integration hub and StackBlitz.

The Vue 3 / Nuxt data grid landscape in 2026

Vue and Nuxt teams shipping admin panels, finance tools, internal CRMs, and back-office dashboards usually pick from a familiar shortlist: Vuetify's v-data-table, PrimeVue DataTable, Element Plus el-table, Naive UI's n-data-table, Vue Good Table, Quasar QTable, or AG Grid Vue. Each works for read-mostly tables. None ship full-blown row+column virtualization, pinning, grouping, and inline editing without you adopting an entire UI ecosystem (Vuetify, Element Plus, PrimeVue) or paying AG Grid Enterprise.

Simple Table for Vue is the alternative: a single component that drops into Vue 3 SFCs and Nuxt apps with the full grid feature set—sorting, filtering, virtualization, column pinning, row grouping, nested headers, cell editing, and theming—free under MIT for individuals and zero-revenue companies. It's powered by simple-table-core, the same engine the React, Angular, Svelte, Solid, and vanilla adapters use, so you get parity across stacks.

This pillar guide shows when Simple Table is the right Vue / Nuxt data grid, how it compares with Vuetify, PrimeVue, Vue Good Table, and Element Plus, and exactly how to wire it up in a Vue 3 SFC or a Nuxt page.

What You'll Learn
  • How Simple Table's Vue adapter compares with Vuetify v-data-table, PrimeVue DataTable, Vue Good Table, Element Plus, and AG Grid Vue
  • Bundle size, performance, and licensing trade-offs for Vue/Nuxt data grids
  • Step-by-step install for a Vue 3 <script setup> SFC and Nuxt 3+
  • Where to migrate from when leaving Vuetify or PrimeVue tables

Why Vue and Nuxt teams pick Simple Table

Simple Table is built for the Vue dashboards and Nuxt apps that ship real product UIs—editable, virtualized, themed—without forcing you into a single UI library.

Composition API & <script setup> first

The grid takes plain refs and reactive arrays. No render functions, no global plugin install. Drop <SimpleTable /> into any SFC and pass props.

Nuxt 3 friendly

Works with Nuxt's auto-imports and Vite-based dev server. Wrap in <ClientOnly> if you need to skip SSR, or render server-side with hydration—your choice, no special build config required.

No UI library lock-in

Use Vuetify, PrimeVue, Element Plus, Naive UI, Tailwind, or your own design system around the grid. Simple Table provides the grid; you keep ownership of the rest of the UI.

MIT for free, sane pricing if you make money

Free for individuals and zero-revenue projects. Per-product Pro/Enterprise pricing for revenue-generating teams—no per-seat AG Grid Enterprise invoice that scales with headcount.

How Simple Table stacks up against Vue incumbents

Below is how Simple Table for Vue compares with the data grid libraries Vue 3 / Nuxt teams most commonly evaluate. Feature support reflects what's available out-of-the-box, not what's possible after deep integration.

FeatureSimple TableVuetify v-data-tablePrimeVue DataTableElement Plus el-tableVue Good Table
Built-in UI (no styling required)
Row + column virtualizationv-data-table-virtualRows onlyRows only
Inline cell editingPartial
Column pinningSticky only
Row grouping + aggregationPartial
Works without adopting an entire UI library
TypeScript-first typesPartial
LicenseMIT / ProMITMITMITMIT
The Bottom Line

Simple Table is the strongest standalone Vue 3 data grid: full virtualization, pinning, grouping, and inline editing without forcing Vuetify, PrimeVue, or Element Plus on the rest of your app. Vue Good Table is the only true standalone in the list, but stops at basic table primitives.

Performance built for Vue and Nuxt dashboards

Internal benchmarks rendering 100,000 rows and 30 columns in a Vue 3 / Vite app on a mid-range laptop:

~170ms
Simple Table for Vue
Initial render
~520ms
Vuetify v-data-table-virtual
Initial render
~2.6s
Element Plus el-table
Without explicit virtualization
Performance highlights
  • Row + column virtualization out-of-the-box—no separate plugin or wrapper component
  • 60fps scrolling with 1M+ rows, including grouped and pinned configurations
  • Reactive props are passed through directly; no full grid re-render when one cell updates
  • Tree-shakable: you import only the SimpleTable component, not an entire UI library

Get up and running in a Vue 3 SFC

Install the package, import the stylesheet from your entry, and use <SimpleTable /> in any <script setup> SFC. Nuxt 3+ auto-imports work as expected.

Install:

npm install @simple-table/vue

Follow the Quick Start guide or open the StackBlitz sandbox below for a full, runnable Vue example.

When Simple Table is the right Vue grid

Pick Simple Table for Vue if any of these apply:

  • You need row + column virtualization without adopting Vuetify or PrimeVue
  • You need inline cell editing, pinning, grouping, or aggregations
  • You're working in Nuxt 3+ and want a Vite-friendly grid that doesn't fight SSR
  • You want a consistent grid across Vue, React, Angular, and Svelte teams
  • You don't want to pay per-developer fees for advanced grid features

Stay on what you have if:

  • You've already standardized on Vuetify, PrimeVue, or Element Plus and a basic table is enough.
  • You actively use AG Grid Enterprise's pivoting/charting/master-detail; Simple Table doesn't replicate those analytical features.

Frequently asked questions

Does Simple Table for Vue work with Nuxt 3 and Nuxt 4?

Yes. The package is Vite/ESM friendly, ships its own stylesheet, and integrates with Nuxt's auto-imports. Wrap the grid in <ClientOnly> if you don't need SSR for table content, or render it server-side—both work.

Is the Vue adapter built on the React adapter?

No. @simple-table/vue wraps simple-table-core, the same vanilla TypeScript engine used by the React, Angular, Svelte, Solid, and vanilla adapters. There is no React in the dependency tree.

Can I use Vue components as cell renderers?

Yes. Cell renderers, header renderers, footer renderers, and column editors all accept Vue components, so you keep reactivity and composition inside your renderers.

How does it compare with Vuetify v-data-table?

Vuetify's table is great if you've already adopted Vuetify. If you haven't, Simple Table is a smaller, more focused dependency with more grid features (column pinning, grouping, inline editing, virtualization) and no Vuetify dependency.

How does it compare with PrimeVue DataTable?

PrimeVue DataTable is the most feature-rich free Vue table; the trade-off is adopting PrimeVue (and its theme system) across your app. Simple Table gives you the same surface area as a single, framework-agnostic dependency.

The verdict for Vue and Nuxt teams

If you're building a Vue 3 or Nuxt app that displays more than a few hundred rows, needs editing, virtualization, pinning, or grouping, and you don't want to adopt a full UI library or pay per developer—Simple Table is the strongest free choice in the Vue ecosystem in 2026.

Simple Table for Vue ships as a single component, integrates cleanly with Composition API and <script setup>, supports TypeScript strict mode, and shares its core with five other framework adapters—so a Vue + React team keeps a single grid mental model across both stacks.

Continue building with Vue

Simple Table pairs a shared core (simple-table-core) with official adapters for React, Vue, Angular, Svelte, Solid, and vanilla TypeScript.

Ready to ship the Vue 3 / Nuxt data grid users love?

Install @simple-table/vue, drop <SimpleTable /> into any <script setup> SFC, and ship sorting, filtering, virtualization, pinning, grouping, and editing in your next Vue release.