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 . --generator nuxt --resource foo

Replace the URL with the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with 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:

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:

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.


List Edit

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

Made with love by 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