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.json
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: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
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
What' new?

Sep 15,16 2022: new edition of our conference dedicated to API Platform and its ecosystem!
The Distribution: Create Powerful APIs with Ease
Core
- General Design Considerations
- GraphQL Support
- Enabling GraphQL
- Changing Location of the GraphQL Endpoint
- GraphiQL
- GraphQL Playground
- Modifying or Disabling the Default IDE
- Request with application/graphql Content-Type
- Operations
- Queries
- Mutations
- Subscriptions
- Workflow of the Resolvers
- Events
- Filters
- Pagination
- Security
- Serialization Groups
- Exception and Error
- Name Conversion
- Custom Types
- Modify the Extracted Types
- Changing the Serialization Context Dynamically
- Export the Schema in SDL
- Handling File Upload
- Change Default Descriptions
- State Providers
- Filters
- Doctrine ORM and MongoDB ODM Filters
- Elasticsearch Filters
- Serializer Filters
- Creating Custom Filters
- ApiFilter Attribute
- The Serialization Process
- Overall Process
- Available Serializers
- The Serialization Context, Groups and Relations
- Using Serialization Groups
- Using Serialization Groups per Operation
- Embedding Relations
- Property Normalization Context
- Calculated Field
- Changing the Serialization Context Dynamically
- Changing the Serialization Context on a Per-item Basis
- Name Conversion
- Decorating a Serializer and Adding Extra Data
- Entity Identifier Case
- Embedding the JSON-LD Context
- Collection Relation
- Validation
- Validating Submitted Data
- Using Validation Groups
- Using Validation Groups on Operations
- Dynamic Validation Groups
- Sequential Validation Groups
- Validating Delete Operations
- Error Levels and Payload Serialization
- Validation on Collection Relations
- Open Vocabulary Generated from Validation Metadata
- Specification Property Restrictions
- Collecting Denormalization Errors
- Overriding Default Order
- OpenAPI Specification Support (formerly Swagger)
- Using the OpenAPI Command
- Overriding the OpenAPI Specification
- Using the OpenAPI and Swagger Contexts
- Disabling an Operation From OpenAPI Documentation
- Changing the Name of a Definition
- Changing Operations in the OpenAPI Documentation
- Disabling Swagger UI or ReDoc
- Changing the Location of Swagger UI
- Using a custom Asset Package in Swagger UI
- Overriding the UI Template
- Compatibility Layer with Amazon API Gateway
- OAuth
- Info Object
- Pushing Related Resources Using HTTP/2
- Using External Vocabularies
- URL Generation Strategy
- NelmioApiDocBundle Integration
- Bootstraping the core library
Schema Generator
- Configuration
- Customizing PHP Namespaces
- Forcing a Field Type (Range)
- Forcing a Field Cardinality
- Changing the Default Cardinality
- Adding a Custom Attribute or Modifying a Generated Attribute
- Forcing (or Enabling) a Class Parent
- Forcing a Class to be Abstract
- Define API Platform Operations
- Forcing a Nullable Property
- Forcing a Unique Property
- Making a Property Read-Only
- Making a Property Write-Only
- Forcing an Embeddable Class to be Embedded
- Skipping Accessor Method Generation
- Using Fluent Mutator Methods
- Disabling the id Generator
- Generating UUIDs
- User-submitted UUIDs
- Generating Custom IDs
- Disabling Usage of Doctrine Collections
- Changing the Field Visibility
- Generating Assert\Type Attributes
- Forcing Doctrine Inheritance Mapping Attribute
- Interfaces and Doctrine Resolve Target Entity Listener
- Custom Schemas
- All Types, Resolve Types and Exclude
- Checking GoodRelation Compatibility
- Author PHPDoc
- PHP File Header
- Disabling Generators and Creating Custom Ones
- Full Configuration Reference