Skip to main content

Nuxt Setup Guide

There are multiple ways to include dcupl in your Nuxt application. The easiest is to check out the dcupl-nuxt-starter project and start working from there. If you already have your own setup, you can simply add the @dcupl/nuxt module to your project and work with our SDK using predefined variables and hooks. For advanced project structures requiring more control over your dcupl instance, you can always choose a custom integration.

Features​

Using dcupl with Nuxt offers several benefits for your development workflow:

  • Client-Side Filtering
  • Server-Side Rendering (SEO)
  • Custom API Endpoints

Client-side filtering makes it much easier to debug your code and data directly in the browser. You are also less dependent on backend filter functionality, which—depending on your data—can make your application faster, more predictable, and significantly cheaper to scale. This is because not every user input (filter change) is propagated to the backend.

Server-side rendering (SSR) allows you to provide a fast and complete initial rendering of your application while data for client-side filtering is fetched in the background.

The custom API endpoints enable you to provide data to third parties using the full capabilities of the dcupl SDK.

dcupl-nuxt-starter​

Our starter project is the best way to explore a working example and learn by reviewing existing code.

Clone or fork the repository from GitHub, install dependencies, and run the project:

git clone https://github.com/dcupl/dcupl-nuxt-starter.git

cd dcupl-nuxt-starter

npm i

npm run dev

The example project loads data from a public dcupl project (Product Catalog), renders a simple table, a text filter component, and a detail page showing the raw JSON data of a product.
To load your own data, create a new dcupl Console project and update the projectId and apiKey in your nuxt.config.ts.

@dcupl/nuxt​

To add dcupl to your existing Nuxt application using the @dcupl/nuxt module, visit the GitHub repository for detailed instructions.
The dcupl-nuxt-starter is also based on this module, so it might be helpful to check it out beforehand.

Installation​

Add the module to your project with:

npx nuxi module add @dcupl/nuxt

Then, configure it in your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['@dcupl/nuxt'],
  dcupl: {
    config: {
      projectId: 'your_project_id',
      apiKey: 'your_sdk_api_key',
    },
  },
});

Accessing the SDK​

You can access the dcupl SDK in your application code using:

const dcupl = useDcupl();

const article = dcupl.query.execute({
  modelKey: 'Article',
  queries: [],
});

Providing Data via a Server Endpoint​

To serve data via a server endpoint, use the dcupl server instance:

import { useDcuplServerInstance } from '#dcupl/server';

export default defineEventHandler(async (event) => {
  const dcupl = await useDcuplServerInstance(event);

  return dcupl.query.execute({
    modelKey: 'Article',
    count: 10,
    queries: [],
  });
});

Custom Integration​

The @dcupl/nuxt module is ideal for quick starts, but sometimes you need more control. For example, if your setup depends on specific user parameters or custom configurations.

In such cases, you can create a custom integration by initializing dcupl manually. Depending on your use case, you can:

  • Define a Nuxt plugin to initialize dcupl, or
  • Initialize it dynamically within your components.

To understand how the @dcupl/nuxt module handles server and client use cases, check out its source code on GitHub.

Example Initialization​

const dcupl = new Dcupl(this.options);

const dcuplAppLoader = new DcuplAppLoader();

dcupl.loaders.add(dcuplAppLoader);

await dcuplAppLoader.config.fetch();
await dcuplAppLoader.process(...);

await dcupl.init();