Nuxt with Vuetify's v-data-table-server

Tue, 15 Sep 2026 00:00:00 +0000

This article showcases the usage Vuetify’s v-data-table-server in a Nuxt application.

Back-end

The example used throughout this example involves fetching movies from a PostgreSQL database using the Drizzle ORM while validation is implemented using Zod. Data is queried in paginated fashion where the page number and size can be adjusted via URL query parameters. Here is server/api/movies/index.get.ts

import { db } from "~~/server/db";
import { Movies } from "~~/server/db/schema";
import { z } from "zod";
import { asc, count, desc, like } from "drizzle-orm";

const querySchema = z.object({
  itemsPerPage: z.coerce.number().default(10),
  page: z.coerce.number().gt(0).default(1),
  sort: z.union([z.literal("title"), z.literal("id")]).default("id"),
  order: z.union([z.literal("asc"), z.literal("desc")]).default("asc"),
});

export default defineEventHandler(async (event) => {
  const { itemsPerPage, page, sort, order } = await getValidatedQuery(
    event,
    querySchema.parse,
  );

  const offset = (page - 1) * itemsPerPage;
  const orderMap = { asc, desc };

  const items = await db
    .select()
    .from(Movies)
    .orderBy(orderMap[order](Movies[sort]))
    .limit(itemsPerPage)
    .offset(offset);

  const [{ total }] = await db.select({ total: count() }).from(Movies);

  return { items, total, itemsPerPage, page, sort, order };
});

Front-end

The front-end consumes the aforementioned API and displays the data in a v-data-table-server.

Nuxt on Maxime Moreillon

Nuxt with Vuetify's v-data-table-server

Back-end

Front-end