Nuxt.js Generator

The Nuxt.js generator scaffolds components for server-side rendered (SSR) applications using Nuxt.js and Vuetify.

Nuxt.js ジェネレーターは、Nuxt.js と Vuetify を使用して、サーバー側でレンダリングされる (SSR) アプリケーションのコンポーネントを足場にします。



Create a Nuxt.js application.

Nuxt.js アプリケーションを作成します。

npm init 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: 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:


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:

nuxt.config.js を次のように更新します。

  buildModules: [
    // ...
  // ...
  // to avoid name conflicts in generators
  components: false,

Generating Routes

npm init @api-platform/client . -- --generator nuxt

Replace the URL by the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with -f openapi3.

URL を Hydra 対応 API のエントリポイントに置き換えます。-f openapi3 で OpenAPI ドキュメントを使用することもできます。

Note: Omit the resource flag to generate files for all resource types exposed by the API.

注: リソース フラグを省略して、API によって公開されるすべてのリソース タイプのファイルを生成します。

Updating Default Layout

Update your layouts/default.vue with following:

layouts/default.vue を次のように更新します。

    <alert />
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
              <nuxt-link :to="{ name: 'books' }">Books</nuxt-link>
              <nuxt-link :to="{ name: 'reviews' }">Reviews</nuxt-link>
    <v-app-bar app color="indigo" dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

      <nuxt />
    <v-footer color="indigo" app>
      <span class="white--text">&copy; {{ date }}</span>

import Alert from '../components/Alert'

export default {
  components: {

  data: () => ({
    date: null,
    drawer: null

  mounted () { = new Date().getFullYear()

Starting the Project

You can launch the server with:


```console npm run dev ````

```consolenpm run dev````

Go to https://localhost:3000/books/ to start using your app.

https://localhost:3000/books/ に移動して、アプリの使用を開始します。