# @giangmv/vue-generator

> Generator apps built with Nuxt, Vue or Vuetify for any API documented

Latest version **0.1.16** (published 2021-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @giangmv/vue-generator
pnpm add @giangmv/vue-generator
yarn add @giangmv/vue-generator
bun add @giangmv/vue-generator
```

Provides the command `vue-generator`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.16 |
| Published | 2021-09-04 |
| First published | 2021-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 209.8 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | giangmv |
| Maintainers | giangmv |
| Keywords | hoanggjang333889@ |

## Links

- npm: https://www.npmjs.com/package/@giangmv/vue-generator
- Repository: https://github.com/giangmv/vue-generator
- Homepage: https://github.com/hoanggiang333889/vue-generator
- Issues: https://github.com/hoanggiang333889/vue-generator
- npm.io page: https://npm.io/package/@giangmv/vue-generator

## Dependencies (11)

- [axios](https://npm.io/package/axios.md) ^0.21.1
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [mkdirp](https://npm.io/package/mkdirp.md) ^1.0.4
- [prettier](https://npm.io/package/prettier.md) ^2.2.1
- [commander](https://npm.io/package/commander.md) ^6.2.1
- [handlebars](https://npm.io/package/handlebars.md) ^4.0.12
- [sprintf-js](https://npm.io/package/sprintf-js.md) ^1.1.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.0.0
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^3.0.0
- [handlebars-helpers](https://npm.io/package/handlebars-helpers.md) ^0.10.0
- [openapi-client-axios](https://npm.io/package/openapi-client-axios.md) ^4.1.0

## Recent versions

- 0.1.16 (latest) — 2021-09-04
- 0.1.15 — 2021-09-04
- 0.1.14 — 2021-08-29
- 0.1.13 — 2021-08-29
- 0.1.12 — 2021-08-28
- 0.1.11 — 2021-08-28
- 0.1.10 — 2021-08-28
- 0.1.9 — 2021-08-28
- 0.1.8 — 2021-08-28
- 0.1.7 — 2021-08-28
- 0.1.6 — 2021-08-28
- 0.1.5 — 2021-08-28
- 0.1.4 — 2021-08-28
- 0.1.3 — 2021-08-28
- 0.1.2 — 2021-08-28
- … 1 more at https://npm.io/package/@giangmv/vue-generator/versions

## README

# 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

```bash
npx 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

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

```bash
npm i --dev @nuxtjs/vuetify @nuxtjs/fontawesom
```
4. Config
- nuxt.config.js
```bash
  buildModules: [
    // ...
    '@nuxtjs/vuetify',
    '@nuxtjs/fontawesome',
    'nuxt-i18n'
  ],
  // ...
  // to avoid name conflicts in generators
  components: false, 
```

5. Generating Routes

```bash
npx @giangmv/vue-generator --generator nuxt --module module
```

6. Updating default layout

- create layouts/default.vue
```bash
<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: null,
    drawer: null
  }),

  mounted () {
    this.date = new Date().getFullYear()
  }
}
</script>
```

## Create Vue
1. Create project

```bash
vue init webpack-simple my-app
```

2. Intall package

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

```bash
npm i bootstrap font-awesome
```
4. Config
- .babelrc
```bash
// .babelrc
{
  "presets": [
    ["es2015", { "modules": false }],
    ["stage-2"]
  ],
  "plugins": [
    ["babel-plugin-transform-builtin-extend", {
      globals: ["Error", "Array"]
    }]
  ]
}
```

5. Generating Routes

```bash
npx @giangmv/vue-generator --generator vue --module module
```

6. Updating default layout

- create main.js
```bash
import Vue from 'vue'
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
import book from './store/modules/book/';
import bookRoutes from './router/book';

Vue.config.productionTip = false;

Vue.use(Vuex);
Vue.use(VueRouter);

const store = new Vuex.Store({
  modules: {
    book,
  }
});

const router = new VueRouter({
  mode: 'history',
  routes: [
      ...bookRoutes,
  ],
});

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app');
```
## Features

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


## Credits

Created by [Giangmv]

---
_Source: https://npm.io/package/@giangmv/vue-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._