API Platform Client Generator

generator to scaffold app with Create-Retrieve-Update-Delete features for any API documentation for:

• Nuxt.js
• Vue.js
• Vuetify.js

Create Nuxt

1. Create project

1npx create-nuxt-app your-app-name

2. Set up project

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)

3. Intall package

1npm i moment lodash vue-i18n vuelidate vuex-map-fields nuxt-i18n

1npm i --dev @nuxtjs/vuetify @nuxtjs/fontawesom

4. Config

• nuxt.config.js

1  buildModules: [
2    // ...
3    '@nuxtjs/vuetify',
4    '@nuxtjs/fontawesome',
5    'nuxt-i18n'
6  ],
7  // ...
8  // to avoid name conflicts in generators
9  components: false, 

5. Generating Routes

1npx @giangmv/vue-generator --generator nuxt --module module

6. Updating default layout

• create layouts/default.vue

1<template>
2  <v-app>
3    <alert />
4    <v-navigation-drawer v-model="drawer" app>
5      <v-list dense>
6        <v-list-item>
7          <v-list-item-action>
8            <v-icon>mdi-home</v-icon>
9          </v-list-item-action>
10          <v-list-item-content>
11            <v-list-item-title>Home</v-list-item-title>
12          </v-list-item-content>
13        </v-list-item>
14        <v-list-item>
15          <v-list-item-action>
16            <v-icon>mdi-book</v-icon>
17          </v-list-item-action>
18          <v-list-item-content>
19            <v-list-item-title>
20              <nuxt-link :to="{ name: 'books' }">Books</nuxt-link>
21            </v-list-item-title>
22          </v-list-item-content>
23        </v-list-item>
24        <v-list-item>
25          <v-list-item-action>
26            <v-icon>mdi-comment-quote</v-icon>
27          </v-list-item-action>
28          <v-list-item-content>
29            <v-list-item-title>
30              <nuxt-link :to="{ name: 'reviews' }">Reviews</nuxt-link>
31            </v-list-item-title>
32          </v-list-item-content>
33        </v-list-item>
34      </v-list>
35    </v-navigation-drawer>
36    <v-app-bar app color="indigo" dark>
37      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
38      <v-toolbar-title>Application</v-toolbar-title>
39    </v-app-bar>
40
41    <v-main>
42      <nuxt />
43    </v-main>
44    <v-footer color="indigo" app>
45      <span class="white--text">&copy; {{ date }}</span>
46    </v-footer>
47  </v-app>
48</template>
49
50<script>
51import Alert from '../components/Alert'
52
53export default {
54  components: {
55    Alert
56  },
57
58  data: () => ({
59    date: null,
60    drawer: null
61  }),
62
63  mounted () {
64    this.date = new Date().getFullYear()
65  }
66}
67</script>

Create Vue

1. Create project

1vue init webpack-simple my-app

2. Intall package

1npm i vue-router vuex vuex-map-fields babel-plugin-transform-builtin-extend babel-preset-es2015 babel-preset-stage-2 lodash

1npm i bootstrap font-awesome

4. Config

• .babelrc

1// .babelrc
2{
3  "presets": [
4    ["es2015", { "modules": false }],
5    ["stage-2"]
6  ],
7  "plugins": [
8    ["babel-plugin-transform-builtin-extend", {
9      globals: ["Error", "Array"]
10    }]
11  ]
12}

5. Generating Routes

1npx @giangmv/vue-generator --generator vue --module module

6. Updating default layout

• create main.js

1import Vue from 'vue'
2import Vuex from 'vuex';
3import VueRouter from 'vue-router';
4import App from './App.vue';
5import 'bootstrap/dist/css/bootstrap.css';
6import 'font-awesome/css/font-awesome.css';
7import book from './store/modules/book/';
8import bookRoutes from './router/book';
9
10Vue.config.productionTip = false;
11
12Vue.use(Vuex);
13Vue.use(VueRouter);
14
15const store = new Vuex.Store({
16  modules: {
17    book,
18  }
19});
20
21const router = new VueRouter({
22  mode: 'history',
23  routes: [
24      ...bookRoutes,
25  ],
26});
27
28new Vue({
29  store,
30  router,
31  render: h => h(App),
32}).$mount('#app');

Features

• Generate high-quality TypeScript or ES6 components:
  • List view
  • Creation form
  • Editing form
  • Deletion button

Credits

Created by [Giangmv]