Nuxt, Next.js, SvelteKit, and others consistently innovate their solutions based on the server-side rendering paradigm. This paradigm generates web content on the server side for each request, leading to improved web application performance, SEO, and user experience. Beyond simply outputting and generating content on the web page, a notable addition in the Nuxt release is the support for Server Handlers. This feature enables us to define functions that run securely on the server and can return JSON data, a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), or use `event.node.res.end()` as a response. The corresponding APIs can be called from Nuxt pages and components. In this post, we will learn how to use Nuxt’s Server Handlers to create a basic todo application using the Xata serverless database platform. The project repository can be found [here](https://github.com/Mr-Malomz/server-handlers/tree/dev). ## Prerequisites To follow along in this tutorial, the following are required: - Basic understanding of TypeScript and Nuxt - Xata [CLI](https://xata.io/docs/getting-started/cli?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) installed - Xata [account](https://app.xata.io/signin?mode=signup?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) ## Project setup In this project, we'll use a prebuilt UI to expedite development. To get started, let’s clone the project by navigating to a desired directory and running the command below: ```bash git clone https://github.com/Mr-Malomz/server-handlers.git && cd server-handlers ``` **Running the project** Next, we’ll need to install the project dependencies by running the command below: ```bash npm i ``` Then, run the application: ```bash npm run dev ``` ![](https://paper-attachments.dropboxusercontent.com/s_154D2F74346663ECD9524FF7F003EF6BE1F6D039235043BCBC915E2B1DB310D7_1703851199301_Screenshot+2023-12-29+at+12.59.50.png) ## Setup the database on Xata To get started, log into the [Xata workspace](https://app.xata.io/workspaces) and create a `todo` database. Inside the `todo` database, create a `Todo` table and add a `description` column of type `String`. ![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703592508608_Screenshot+2023-12-26+at+13.07.33.png) **Get the Database URL and set up the API Key** To securely connect to the database, Xata provides a unique and secure URL for accessing it. To get the database URL, click the **Get code snippet** button and copy the URL. Then click the **API Key** link, add a new key, save and copy the API key. ![](https://paper-attachments.dropboxusercontent.com/s_154D2F74346663ECD9524FF7F003EF6BE1F6D039235043BCBC915E2B1DB310D7_1703842037934_Screenshot+2023-12-29+at+10.26.45.png) ![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596013324_Screenshot+2023-12-26+at+14.04.29.png) ![](https://paper-attachments.dropboxusercontent.com/s_724B5DB0ED02FBEDE105C37DC2102A0D29EC66EAFDCC27146EA9AEF451272040_1703596030165_Screenshot+2023-12-21+at+23.42.03.png) **Setup environment variable** To do this, update the `nuxt.config.ts` file to define a runtime configuration the application will use to load environment variables. ```ts // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true }, css: ['~/assets/css/main.css'], postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, //add below runtimeConfig: { public: { xataApiKey: '', xataDatabaseUrl: '', }, }, }); ``` Next, we must create an `index.d.ts` file in the root directory to type our runtime configuration. ```ts declare module 'nuxt/schema' { interface PublicRuntimeConfig { xataDatabaseUrl: string; xataApiKey: string; } } export {}; ``` Finally, we must add our database URL and API key as an environment variable. To do this, create `.env` file in the root directory and add the copied URL and API key. ```bash XATA_DATABASE_URL= XATA_API_KEY= ``` **Integrate Xata with Nuxt** To seamlessly integrate Xata with Nuxt, Xata provides a [CLI](https://xata.io/docs/getting-started/cli) to install the required dependency and generate a fully type-safe API client. To do this, we need to run the command below: ```bash xata init ``` On running the command, we’ll have to answer a few questions. Answer them as shown below: ```bash Generate code and types from your Xata database Choose the output path for the generated code lib/xata.ts ``` With that, we should see a `lib/xata.ts` file in the root directory. A best practice is not to modify the generated code but to create a helper function to use it. To do this, create a `utils/xataClient.ts` file in the root directory and insert the snippet below: ```ts import { XataClient } from '~/lib/xata'; export const xataClient = () => { const config = useRuntimeConfig(); const xata = new XataClient({ databaseURL: config.public.xataDatabaseUrl, apiKey: config.public.xataApiKey, branch: 'main', }); return xata; }; export interface ApiResponse { status: number; message: string; data?: T; error?: { message: string; }; } ``` The snippet above imports the `XataClient` class from the generated code and configures the client with the required parameters. In addition, we also define an `ApiResponse` interface to describe our authentication response type. ## Building the todo application When a new Nuxt project is created, it includes a `server` directory. This directory is meant for registering Server Handlers for our application. The process involves creating directories and files inside the server directory. Nuxt will automatically scan and register these files and directories as Server Handlers with support for [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/). ```bash -| server/ ---| api/ -----| hello.ts # /api/hello ---| routes/ -----| bonjour.ts # /bonjour ``` In our todo applications, we will use Server Handlers to do the following: - Create a todo - Get a todo - Update a todo - Delete a todo - List todos **Create a todo** To create a todo, we need to create an `api/createTodo.ts` inside the `server` folder and insert the snippet below: ```ts import { TodoRecord } from '~/lib/xata'; import { ApiResponse, xataClient } from '~/utils/xataClient'; export default defineEventHandler(async (event) => { const xata = xataClient(); const { description } = await readBody(event); const response = await xata.db.Todo.create({ description }); if (response.description) { const successResponse: ApiResponse = { status: 201, message: 'success', data: response, }; return successResponse; } else { const failureResponse: ApiResponse = { status: 500, message: 'failed', error: { message: 'Error creating todo', }, }; return failureResponse; } }); ``` The snippet above does the following: - Imports the required dependencies - Creates a handler that extracts the required information and uses the `xataClient` to create a todo. The function also uses the `ApiResponse` interface to return the appropriate response **Get a todo** To get a todo, we need to create a dynamic route `api/[id].ts` file and insert the snippet below: ```ts import { TodoRecord } from '~/lib/xata'; import { ApiResponse, xataClient } from '~/utils/xataClient'; export default defineEventHandler(async (event) => { const xata = xataClient(); const id = event.context.params!.id; if (!id) { const emptyDescriptionResponse: ApiResponse = { status: 400, message: 'failed', error: { message: 'No id provided.', }, }; return emptyDescriptionResponse; } const response = await xata.db.Todo.read(id); if (response) { const successResponse: ApiResponse = { status: 200, message: 'success', data: response, }; return successResponse; } else { const failureResponse: ApiResponse = { status: 500, message: 'failed', error: { message: 'Error getting todo', }, }; return failureResponse; } }); ``` The snippet above retrieves the dynamic parameter, checks if it is available, uses it to get the details of the associated todo, and returns the appropriate response. **Update a todo** To update a todo, we need to create an `api/updateTodo.ts` file and insert the snippet below: ```ts import { TodoRecord } from '~/lib/xata'; import { ApiResponse, xataClient } from '~/utils/xataClient'; export default defineEventHandler(async (event) => { const xata = xataClient(); const { description, id } = await readBody(event); const response = await xata.db.Todo.update(id, { description }); if (response) { const successResponse: ApiResponse = { status: 200, message: 'success', data: response, }; return successResponse; } else { const failureResponse: ApiResponse = { status: 500, message: 'failed', error: { message: 'Error updating todo', }, }; return failureResponse; } }); ``` The snippet above performs an action similar to the create todo functionality but updates the todo by searching for the corresponding todo and updating it. **Delete a todo** To delete a todo, we need to create an `api/deleteTodo.ts` file and insert the snippet below: ```ts import { ApiResponse, xataClient } from '~/utils/xataClient'; export default defineEventHandler(async (event) => { const xata = xataClient(); const { id } = await readBody(event); const response = await xata.db.Todo.delete(id); if (response) { const successResponse: ApiResponse = { status: 200, message: 'success', data: 'Todo deleted successfully', }; return successResponse; } else { const failureResponse: ApiResponse = { status: 500, message: 'failed', error: { message: 'Error deleting todo', }, }; return failureResponse; } }); ``` The snippet above gets the `id` of a todo and uses the `xataClient` to delete the matching todo. **List todos** To get the list of todos, we need to create an `api/listTodo.ts` file and insert the snippet below: ```ts import { TodoRecord } from '~/lib/xata'; import { ApiResponse, xataClient } from '~/utils/xataClient'; export default defineEventHandler(async (event) => { const xata = xataClient(); const response = await xata.db.Todo.getAll(); if (response) { const successResponse: ApiResponse = { status: 200, message: 'success', data: response, }; return successResponse; } else { const failureResponse: ApiResponse = { status: 500, message: 'failed', error: { message: 'Error getting todo list', }, }; return failureResponse; } }); ``` The snippet above uses the `xataClient` to get the list of todos and returns the appropriate responses. ## Putting it all together! With that done, we can start using the handlers in the UI. **Update the create todo component** To do this, we need to modify the `components/TodoForm.vue` file as shown below: ```ts

Nuxt

Getting started with Nuxt Server Handlers

blog

Contact