diff --git a/create-client/images/nextjs/create-client-nextjs-list.png b/create-client/images/nextjs/create-client-nextjs-list.png index 467e4d4576f..23179dfd32b 100644 Binary files a/create-client/images/nextjs/create-client-nextjs-list.png and b/create-client/images/nextjs/create-client-nextjs-list.png differ diff --git a/create-client/images/nextjs/create-client-nextjs-show.png b/create-client/images/nextjs/create-client-nextjs-show.png index 9983f70dfbe..f52dd54007c 100644 Binary files a/create-client/images/nextjs/create-client-nextjs-show.png and b/create-client/images/nextjs/create-client-nextjs-show.png differ diff --git a/create-client/images/nuxt/create-client-nuxt-edit.png b/create-client/images/nuxt/create-client-nuxt-edit.png new file mode 100644 index 00000000000..3b86f90eb57 Binary files /dev/null and b/create-client/images/nuxt/create-client-nuxt-edit.png differ diff --git a/create-client/images/nuxt/create-client-nuxt-list.png b/create-client/images/nuxt/create-client-nuxt-list.png new file mode 100644 index 00000000000..4fe5e926bac Binary files /dev/null and b/create-client/images/nuxt/create-client-nuxt-list.png differ diff --git a/create-client/images/nuxtjs/create-client-nuxtjs-edit.png b/create-client/images/nuxtjs/create-client-nuxtjs-edit.png deleted file mode 100644 index a6c4d96e443..00000000000 Binary files a/create-client/images/nuxtjs/create-client-nuxtjs-edit.png and /dev/null differ diff --git a/create-client/images/nuxtjs/create-client-nuxtjs-list.png b/create-client/images/nuxtjs/create-client-nuxtjs-list.png deleted file mode 100644 index da095d5c974..00000000000 Binary files a/create-client/images/nuxtjs/create-client-nuxtjs-list.png and /dev/null differ diff --git a/create-client/index.md b/create-client/index.md index 19b6019f21b..fac74db7971 100644 --- a/create-client/index.md +++ b/create-client/index.md @@ -10,7 +10,7 @@ and native mobile apps from APIs supporting the [Hydra](http://www.hydra-cg.com/ It is able to generate apps using the following frontend stacks: - [Next.js](nextjs.md) -- [Nuxt.js](nuxtjs.md) +- [Nuxt](nuxt.md) - [Quasar](quasar.md) - [Vuetify](vuetify.md) - [React](react.md) diff --git a/create-client/nuxt.md b/create-client/nuxt.md new file mode 100644 index 00000000000..4f80abdaee3 --- /dev/null +++ b/create-client/nuxt.md @@ -0,0 +1,102 @@ +# Nuxt Generator + +Bootstrap a [Nuxt 3](https://nuxt.com/) application: + +```console +npx nuxi init my-app +cd my-app +``` + +Install the required dependencies: + +```console +yarn add dayjs @pinia/nuxt qs @types/qs +``` + +To generate the code you need for a given resource, run the following command: + +```console +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`: + +```typescript +// 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: + +```console +yarn add -D tailwindcss postcss autoprefixer +yarn tailwindcss init -p +``` + +Add this code in `nuxt.config.ts`: + +```typescript +// 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`: + +```javascript +/** @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: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +You can launch the server with: + +```console +yarn dev -o +```` + +Go to `https://localhost:3000/books/` to start using your app. + +## Screenshots + +![List](images/nuxt/create-client-nuxt-list.png) +![Edit](images/nuxt/create-client-nuxt-edit.png) diff --git a/create-client/nuxtjs.md b/create-client/nuxtjs.md deleted file mode 100644 index 816e58ddb6a..00000000000 --- a/create-client/nuxtjs.md +++ /dev/null @@ -1,152 +0,0 @@ -# Nuxt.js Generator - -The Nuxt.js generator scaffolds components for server-side rendered (SSR) 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). - -```console -npm init nuxt-app your-app-name -``` - -It will ask you some questions, you can use these answers: - -```console -Project name: your-app-name -Programming language: JavaScript -Package manager: NPM -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: - -```console -npm install moment lodash vue-i18n vuelidate vuex-map-fields nuxt-i18n -npm install --dev @nuxtjs/vuetify @nuxtjs/fontawesome -``` - -## Updating Nuxt Config - -Update your `nuxt.config.js` with following: - -```javascript - buildModules: [ - // ... - '@nuxtjs/vuetify', - '@nuxtjs/fontawesome', - 'nuxt-i18n' - ], - // ... - // to avoid name conflicts in generators - components: false, -``` - -## Generating Routes - -```console -npm init @api-platform/client https://demo.api-platform.com . -- --generator nuxt -``` - -Replace the URL by the entrypoint of your Hydra-enabled API. -You can also use an OpenAPI documentation with `-f openapi3`. - -**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: - -```vue - - - -``` - -## Starting the Project - -You can launch the server with: - -```console -npm run dev -```` - -Go to `https://localhost:3000/books/` to start using your app. - -## Screenshots - -![List](images/nuxtjs/create-client-nuxtjs-list.png) -![Edit](images/nuxtjs/create-client-nuxtjs-edit.png) diff --git a/distribution/index.md b/distribution/index.md index 92c4bb4eeba..9888bbb4db9 100644 --- a/distribution/index.md +++ b/distribution/index.md @@ -20,7 +20,7 @@ The easiest and most powerful way to get started is [to download the API Platfor * the API skeleton, including [the Core library](../core/index.md), [the Symfony framework](https://symfony.com/) ([optional](../core/bootstrap.md)) and [the Doctrine ORM](https://www.doctrine-project.org/projects/orm.html) ([optional](../core/extending.md)) * [the client scaffolding tool](../create-client/) to generate [Next.js](../create-client/ -) web applications from the API documentation ([Nuxt.js](https://nuxtjs.org/), [Vue](https://vuejs.org/), [Create React App](https://reactjs.org), [React Native](https://facebook.github.io/react-native/), [Quasar](https://quasar.dev/) and [Vuetify](https://vuetifyjs.com/) are also supported) +) web applications from the API documentation ([Nuxt](https://nuxt.com/), [Vue](https://vuejs.org/), [Create React App](https://reactjs.org), [React Native](https://facebook.github.io/react-native/), [Quasar](https://quasar.dev/) and [Vuetify](https://vuetifyjs.com/) are also supported) * [a beautiful admin interface](../admin/), built on top of React Admin, dynamically created by parsing the API documentation * all you need to [create real-time and async APIs using the Mercure protocol](../core/mercure.md) * a [Docker](../deployment/docker-compose.md) definition to start a working development environment in a single command, providing containers for the API and the Next.js web application diff --git a/outline.yaml b/outline.yaml index b4854a5dafd..58621103d90 100644 --- a/outline.yaml +++ b/outline.yaml @@ -82,7 +82,7 @@ chapters: items: - index - nextjs - - nuxtjs + - nuxt - vuetify - quasar - react