nuxtjsにvuetifyjs / vee-validate を適用する

はじめに

• 下記のvuetifyjs css Frameworkをnextjsに適用する vuetifyjs.com

インストールと設定

$ yarn add @nuxtjs/vuetify 
$ yarn add vee-validate

• nuxt.config.jpファイルに下記の記述を追加する

buildModules: [
    (省略)
    '@nuxtjs/vuetify'
  ],

vuetifyjsインストール時に下記のエラーが発生して苦戦する

• vuetifyjs時に下記のエラーが発生した場合

make: Entering directory `/srv/frontend/app/node_modules/fibers/build'
  CXX(target) Release/obj.target/fibers/src/fibers.o
make: g++: Command not found
make: *** [Release/obj.target/fibers/src/fibers.o] Error 127
make: Leaving directory `/srv/frontend/app/node_modules/fibers/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
gyp ERR! System Linux 4.19.121-linuxkit
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release"
gyp ERR! cwd /srv/frontend/app/node_modules/fibers
gyp ERR! node -v v14.15.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 

EC2のamazonlinexの場合

• 下記のコマンドを実行してからインストールすると、エラーが発生しなくなりました。

Yum update
yum install gcc gcc-c++
yum groupinstall 'Development Tools'

コード

<template>
  <v-app id="inspire">
    <v-container>
      <v-row justify="center">
        <v-col cols="6">
          <v-card>
            <v-card-title>Hello World</v-card-title>
          </v-card>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="6">
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name" required />
            <v-text-field
              v-model="email"
              :rules="emailRules"
              label="E-mail"
              required
            />
            <v-select
              v-model="select"
              :items="items"
              :rules="[v => !!v || 'Item is required']"
              label="Item"
              required
            />
            <v-checkbox
              v-model="checkbox"
              :rules="[v => !!v || 'You must agree to continue!']"
              label="Do you agree?"
              required
            />
            <v-btn
              :disabled="!valid"
              color="success"
              class="mr-4"
              @click="validate"
            >
              Validate
            </v-btn>
            <v-btn
              color="error"
              class="mr-4"
              @click="reset"
            >
              Reset Form
            </v-btn>
            <v-btn
              color="warning"
              @click="resetValidation"
            >
              Reset Validation
            </v-btn>
          </v-form>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || 'Name is required',
      v => (v && v.length <= 10) || 'Name must be less than 10 characters'
    ],
    email: '',
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
    ],
    select: null,
    items: [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4'
    ],
    checkbox: false
  }),
  methods: {
    validate () {
      this.$refs.form.validate()
    },
    reset () {
      this.$refs.form.reset()
    },
    resetValidation () {
      this.$refs.form.resetValidation()
    }
  }
}
</script>

• 下記のサンプルコードを流量しました。 vuetifyjs.com

実際の画面