Api Platform conference
Register now
v2.6 Nuxt.js Generator
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.js Generator

The Nuxt.js Client Generator generates components for Server Side Rendered applications using Nuxt.js and Vuetify.

# Install

# Nuxt

Create a Nuxt.js application. The easiest way is to execute:

npx create-nuxt-app your-app-name


yarn create nuxt-app your-app-name

It will ask you some questions you can use these answers :

Project name: your-app-name
Programming language: JavaScript
Package manager: Yarn
UI framework: Vuetify.js
Nuxt.js modules: None
Linting tools: Prettier, Lint staged files
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static (Static/JAMStack hosting)

# Installing the Generator Dependencies

Install required dependencies:

yarn add moment lodash vue-i18n vuelidate vuex-map-fields nuxt-i18n
yarn add --dev @nuxtjs/vuetify @nuxtjs/fontawesome

# Updating nuxtjs config

Update your nuxt.config.js with following:

  buildModules: [
    // ...
  // ...
  // to avoid name conflicts in generators
  components: false,  

# Generating Routes

npx @api-platform/client-generator https://demo.api-platform.com . --generator nuxt

Replace the URL by the entrypoint of your Hydra-enabled API

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

# Updating default layout

Update your layouts/default.vue with following:

    <alert />
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
              <nuxt-link :to="{ name: 'books' }">Books</nuxt-link>
              <nuxt-link :to="{ name: 'reviews' }">Reviews</nuxt-link>
    <v-app-bar app color="indigo" dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

      <nuxt />
    <v-footer color="indigo" app>
      <span class="white--text">&copy; {{ date }}</span>

import Alert from '../components/Alert'

export default {
  components: {

  data: () => ({
    date: null,
    drawer: null

  mounted () {
    this.date = new Date().getFullYear()

# Starting the Project

You can launch the server with:

yarn dev

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

# Screenshots


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