Api Platform conference
Register now
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

# Nuxt Generator

Bootstrap a Nuxt 3 application:

npx nuxi init my-app
cd my-app

Install the required dependencies:

yarn add dayjs @pinia/nuxt qs @types/qs

To generate the code you need for a given resource, run the following command:

yarn create @api-platform/client https://demo.api-platform.com . --generator nuxt --resource foo

Replace the URL with the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with https://demo.api-platform.com/docs.jsonopenapi and -f openapi3.

Omit the resource flag to generate files for all resource types exposed by the API.

Add Pinia module in nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ...
  modules: ["@pinia/nuxt"],
  // ...

Delete app.vue as it will prevent Nuxt router to work correctly.

Optionally, install Tailwind to get an app that looks good:

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

Add this code in nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ...
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
  // ...

And this code in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  theme: {
    extend: {},
  plugins: [],

Create the file assets/css/main.css and add this code in it:

@tailwind base;
@tailwind components;
@tailwind utilities;

You can launch the server with:

yarn dev -o

Go to https://localhost:3000/books/ to start using your app.

# Screenshots

List Edit

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop