Skip to content

Commit 4321e37

Browse files
alOnehalOneh
authored
add Nuxt.js doc (#1176)
1 parent c24ee52 commit 4321e37

File tree

6 files changed

+127
-1
lines changed

6 files changed

+127
-1
lines changed

‎client-generator/images/nuxtjs/client-generator-nuxtjs-edit.png

229 KB
Loading

‎client-generator/images/nuxtjs/client-generator-nuxtjs-list.png

405 KB
Loading

‎client-generator/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ It is able to generate apps using the following frontend stacks:
1111
* [React with Redux](react.md)
1212
* [React Native](react-native.md)
1313
* [Next.js](nextjs.md)
14+
* [Nuxt.js](nuxtjs.md)
1415
* [Vue.js](vuejs.md)
1516
* [Quasar Framework](quasar.md)
1617
* [Vuetify](vuetify.md)

‎client-generator/nuxtjs.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Nuxt.js Generator
2+
3+
The Nuxt.js Client Generator generates components for Server Side Rendered applications using [Nuxt.js](https://nuxtjs.org/) and [Vuetify](https://vuetifyjs.com/).
4+
5+
## Install
6+
7+
### Nuxt
8+
9+
Create a [Nuxt.js application](https://nuxtjs.org/guides/get-started/installation#using-create-nuxt-app). The easiest way is to execute:
10+
11+
$ npx create-nuxt-app your-app-name
12+
# or
13+
$ yarn create nuxt-app your-app-name
14+
15+
It will ask you some questions you can use these answers :
16+
17+
```
18+
Project name: your-app-name
19+
Programming language: JavaScript
20+
Package manager: Yarn
21+
UI framework: Vuetify.js
22+
Nuxt.js modules: None
23+
Linting tools: Prettier, Lint staged files
24+
Testing framework: None
25+
Rendering mode: Single Page App
26+
Deployment target: Static (Static/JAMStack hosting)
27+
```
28+
29+
### Installing the Generator Dependencies
30+
31+
Install required dependencies:
32+
33+
$ yarn add moment lodash vue-i18n vuelidate vuex-map-fields
34+
35+
## Generating Routes
36+
37+
$ npx @api-platform/client-generator https://demo.api-platform.com . --generator nuxt
38+
# Replace the URL by the entrypoint of your Hydra-enabled API
39+
40+
> Note: Omit the resource flag to generate files for all resource types exposed by the API.
41+
42+
## Updating default layout
43+
44+
45+
Update your `layouts/default.vue` with following:
46+
47+
```javascript
48+
<template>
49+
<v-app>
50+
<alert />
51+
<v-navigation-drawer v-model="drawer" app>
52+
<v-list dense>
53+
<v-list-item>
54+
<v-list-item-action>
55+
<v-icon>mdi-home</v-icon>
56+
</v-list-item-action>
57+
<v-list-item-content>
58+
<v-list-item-title>Home</v-list-item-title>
59+
</v-list-item-content>
60+
</v-list-item>
61+
<v-list-item>
62+
<v-list-item-action>
63+
<v-icon>mdi-book</v-icon>
64+
</v-list-item-action>
65+
<v-list-item-content>
66+
<v-list-item-title>
67+
<nuxt-link :to="{ name: 'books' }">Books</nuxt-link>
68+
</v-list-item-title>
69+
</v-list-item-content>
70+
</v-list-item>
71+
<v-list-item>
72+
<v-list-item-action>
73+
<v-icon>mdi-comment-quote</v-icon>
74+
</v-list-item-action>
75+
<v-list-item-content>
76+
<v-list-item-title>
77+
<nuxt-link :to="{ name: 'reviews' }">Reviews</nuxt-link>
78+
</v-list-item-title>
79+
</v-list-item-content>
80+
</v-list-item>
81+
</v-list>
82+
</v-navigation-drawer>
83+
<v-app-bar app color="indigo" dark>
84+
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
85+
<v-toolbar-title>Application</v-toolbar-title>
86+
</v-app-bar>
87+
88+
<v-main>
89+
<nuxt />
90+
</v-main>
91+
<v-footer color="indigo" app>
92+
<span class="white--text">&copy; {{ date }}</span>
93+
</v-footer>
94+
</v-app>
95+
</template>
96+
97+
<script>
98+
import Alert from '../components/Alert';
99+
100+
export default {
101+
components: {
102+
Alert
103+
},
104+
105+
data: () => ({
106+
date: new Date().getFullYear(),
107+
drawer: null
108+
})
109+
};
110+
</script>
111+
```
112+
113+
## Starting the Project
114+
115+
You can launch the server with
116+
117+
$ yarn dev
118+
119+
Go to `https://localhost:3000/books/` to start using your app.
120+
121+
## Screenshots
122+
123+
![List](images/nuxtjs/client-generator-nuxtjs-list.png)
124+
![Edit](images/nuxtjs/client-generator-nuxtjs-edit.png)

‎distribution/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ The easiest and most powerful way to get started is to download the API Platform
1515
* an API skeleton, including with [the server-side component](../core/index.md), [the Symfony 4
1616
microframework](https://symfony.com/doc/current/setup/flex.html) and [the Doctrine ORM](https://www.doctrine-project.org/projects/orm.html) (optional)
1717
* [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/)
18-
* [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
18+
* [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
1919
* a [Docker](https://docker.com)-based setup to bootstrap the project in a single command, providing:
2020
* servers for the API and JavaScript apps
2121
* 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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ chapters:
7272
- index
7373
- react
7474
- nextjs
75+
- nuxtjs
7576
- react-native
7677
- vuejs
7778
- vuetify

0 commit comments

Comments
 (0)