Add Nuxt.js doc for Nuxt.js generator

client-generator/index.md

@@ -11,6 +11,7 @@ It is able to generate apps using the following frontend stacks:
 * [React with Redux](react.md)
 * [React Native](react-native.md)
 * [Next.js](nextjs.md)
+* [Nuxt.js](nuxtjs.md)
 * [Vue.js](vuejs.md)
 * [Quasar Framework](quasar.md)
 * [Vuetify](vuetify.md)

client-generator/nuxtjs.md

@@ -0,0 +1,124 @@
+# Nuxt.js Generator
+
+The Nuxt.js Client Generator generates components for Server Side Rendered applications using [Nuxt.js](https://nuxtjs.org/) and [Vuetify](https://vuetifyjs.com/).
+
+## Install
+
+### Nuxt
+
+Create a [Nuxt.js application](https://nuxtjs.org/guides/get-started/installation#using-create-nuxt-app). The easiest way is to execute:  
+
+    $ npx create-nuxt-app your-app-name
+    # or
+    $ 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
+
+## 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:
+
+```javascript
+<template>
+  <v-app>
+    <alert />
+    <v-navigation-drawer v-model="drawer" app>
+      <v-list dense>
+        <v-list-item>
+          <v-list-item-action>
+            <v-icon>mdi-home</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Home</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-action>
+            <v-icon>mdi-book</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>
+              <nuxt-link :to="{ name: 'books' }">Books</nuxt-link>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-action>
+            <v-icon>mdi-comment-quote</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>
+              <nuxt-link :to="{ name: 'reviews' }">Reviews</nuxt-link>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    <v-app-bar app color="indigo" dark>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main>
+      <nuxt />
+    </v-main>
+    <v-footer color="indigo" app>
+      <span class="white--text">&copy; {{ date }}</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import Alert from '../components/Alert';
+
+export default {
+  components: {
+    Alert
+  },
+
+  data: () => ({
+    date: new Date().getFullYear(),
+    drawer: null
+  })
+};
+</script>
+```
+
+## Starting the Project
+
+You can launch the server with 
+
+    $ yarn dev
+
+Go to `https://localhost:3000/books/` to start using your app.
+
+## Screenshots
+
+![List](images/nuxtjs/client-generator-nuxtjs-list.png)  
+![Edit](images/nuxtjs/client-generator-nuxtjs-edit.png)

distribution/index.md

@@ -15,7 +15,7 @@ The easiest and most powerful way to get started is to download the API Platform
 * an API skeleton, including with [the server-side component](../core/index.md), [the Symfony 4
   microframework](https://symfony.com/doc/current/setup/flex.html) and [the Doctrine ORM](https://www.doctrine-project.org/projects/orm.html) (optional)
 * [a dynamic JavaScript admin](../admin/), leveraging the hypermedia capabilities of API Platform (or any Hydra API), built on top of [React Admin](https://marmelab.com/react-admin/)
-* [a client generator](../client-generator/) to scaffold [React](https://reactjs.org), [Vue](https://vuejs.org/), [React Native](https://facebook.github.io/react-native/), [Next.js](https://nextjs.org/), [Quasar](https://quasar.dev/) and [Vuetify](https://vuetifyjs.com/) apps in one command, from any Hydra API
+* [a client generator](../client-generator/) to scaffold [React](https://reactjs.org), [Vue](https://vuejs.org/), [React Native](https://facebook.github.io/react-native/), [Next.js](https://nextjs.org/), [Nuxt.js](https://nuxtjs.org/), [Quasar](https://quasar.dev/) and [Vuetify](https://vuetifyjs.com/) apps in one command, from any Hydra API
 * a [Docker](https://docker.com)-based setup to bootstrap the project in a single command, providing:
   * servers for the API and JavaScript apps
   * a [Varnish Cache](https://varnish-cache.org/) server enabling [API Platform's built-in invalidation cache mechanism](../core/performance.md#enabling-the-built-in-http-cache-invalidation-system)

outline.yaml

@@ -72,6 +72,7 @@ chapters:
       - index
       - react
       - nextjs
+      - nuxtjs
       - react-native
       - vuejs
       - vuetify