The conference dedicated to API Platform and its ecosystem
Vue.js Generator
Bootstrap a Vue.js application using vue-cli:
vue init webpack-simple my-app
cd my-app
Install the required dependencies:
yarn add vue-router vuex vuex-map-fields babel-plugin-transform-builtin-extend babel-preset-es2015 babel-preset-stage-2 lodash
Optionally, install Bootstrap and Font Awesome to get an app that looks good:
yarn add bootstrap font-awesome
To generate all the code you need for a given resource run the following command:
npx @api-platform/client-generator https://demo.api-platform.com src/ --generator vue --resource book
Replace the URL with the entrypoint of your Hydra-enabled API. Omit the resource flag to generate files for all resource types exposed by the API.
The code is ready to be executed! Register the generated routes and store modules. Here is an example:
// main.js
import Vue from 'vue'
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
import book from './store/modules/book/';
import bookRoutes from './router/book';
Vue.config.productionTip = false;
Vue.use(Vuex);
Vue.use(VueRouter);
const store = new Vuex.Store({
modules: {
book,
}
});
const router = new VueRouter({
mode: 'history',
routes: [
...bookRoutes,
],
});
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app');
Make sure to update the Babel configuration:
// .babelrc
{
"presets": [
["es2015", { "modules": false }],
["stage-2"]
],
"plugins": [
["babel-plugin-transform-builtin-extend", {
globals: ["Error", "Array"]
}]
]
}
Go to https://localhost/books/
to start using your app.
That's all!
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
The API Component
- 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
- 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
- Overriding Default Order
- OpenAPI Specification Support (formerly Swagger)
- Using the OpenAPI Command
- Overriding the OpenAPI Specification
- Using the OpenAPI and Swagger Contexts
- Changing the Name of a Definition
- Changing Operations in the OpenAPI Documentation
- 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
The Schema Generator Component
- Configuration
- Customizing PHP Namespaces
- Forcing a Field Range
- Forcing a Field Cardinality
- Forcing a Relation Table Name
- Forcing (or Disabling) a Class Parent
- Forcing a Class to be Abstract
- Define Operations
- Forcing a Nullable Property
- Forcing a Unique Property
- Making a Property Read-Only
- Making a Property Write-Only
- Forcing a Property to be in a Serialization Group
- Forcing an Embeddable Class to be Embedded
- Author PHPDoc
- Disabling Generators and Creating Custom Ones
- Skipping Accessor Method Generation
- Disabling the id Generator
- Generating UUIDs
- User submitted UUIDs
- Generating Custom IDs
- Disabling Usage of Doctrine Collections
- Changing the Field Visibility
- Generating @Assert\Type Annotations
- Forcing Doctrine Inheritance Mapping Annotation
- Interfaces and Doctrine Resolve Target Entity Listener
- Custom Schemas
- Checking GoodRelation Compatibility
- PHP File Header
- Full Configuration Reference