実現したいこと

VeeValidateの独自Validate追加でaxiosを利用して、
APIを呼び出し入力チェックを行いたい。

Nuxtのpluginでaxiosを呼び出したいのですが、
インポートが上手くできていないようです。
下記実装となります。
間違っているところをご教示頂けましたら幸いです。

現在の実装

vee-validate.js

vee
1import Vue from 'vue'
2import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate'
3import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージを日本語化します
4import { required, numeric, email, max, min, alpha_num } from 'vee-validate/dist/rules' // 使用するバリデーションルールを指定します。
5import axios from "axios"
6
7// VeeValidateが用意している各ルールを使用するよう指定
8extend('required', required) // 必須項目のバリデーション
9extend('numeric', numeric)
10extend('email', email)
11extend('max', max)
12extend('min', min)
13extend('alpha_num', alpha_num)
14
15extend('email_unique', {
16  validate: value => {
17    try {
18      var resp = axios.Get('http://localhost:8080/exist/email/' + value)
19      return false
20    } catch (error) {
21      console.log(error)
22      return true
23    }
24  },
25  message: '既に登録されているメールアドレスです',
26})
27
28// 下記は固定で書く
29Vue.component('ValidationProvider', ValidationProvider)
30Vue.component('ValidationObserver', ValidationObserver)
31localize('ja', ja)

nuxt.config.js

nuxt.config.js
1module.exports = {
2  /*
3  ** Headers of the page
4  */
5  head: {
6    title: 'my-nuxt-app',
7    meta: [
8      { charset: 'utf-8' },
9      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
11    ],
12    link: [
13      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
14    ]
15  },
16  /*
17  ** Customize the progress bar color
18  */
19  loading: { color: '#3B8070' },
20  /*
21  ** Build configuration
22  */
23  build: {
24    // vendor: ['element-ui'],
25    /*
26    ** Run ESLint on save
27    */
28    extend(config, { isDev, isClient }) {
29      if (isDev && isClient) {
30        config.module.rules.push({
31          enforce: 'pre',
32          test: /.(js|vue)$/,
33          loader: 'eslint-loader',
34          exclude: /(node_modules)/
35        })
36      }
37    }
38  },
39
40  modules: [
41    '@nuxtjs/axios',
42  ],
43  axios: {
44  },
45  css: [
46    'element-ui/lib/theme-chalk/index.css'
47  ],
48  plugins: [
49    { src: '~/plugins/localStorage.js', ssr: false },
50    { src: '~/plugins/routerOption.js', ssr: false },
51    { src: '~plugins/element-ui', ssr: true },
52    { src: '~/plugins/vee-validate', ssr: false },
53  ],
54
55  build: {
56    transpile: [
57      "vee-validate/dist/rules"
58    ]
59  },
60
61
62  env: {
63    userUrl: process.env.USER_URL || 'http://localhost:8080/users/test',
64    postUrl: process.env.USER_URL || 'http://localhost:8090/posts',
65  },
66}
67

エラーメッセージ

TypeError: axios__WEBPACK_IMPORTED_MODULE_4___default.a.Get is not a function
    at Object.validate (vee-validate.js?92f5:18)
    at eval (vee-validate.esm.js?7bb1:698)
    at step (vee-validate.esm.js?7bb1:65)
    at Object.eval [as next] (vee-validate.esm.js?7bb1:46)
    at eval (vee-validate.esm.js?7bb1:39)
    at new Promise (<anonymous>)
    at __awaiter (vee-validate.esm.js?7bb1:35)
    at _test (vee-validate.esm.js?7bb1:687)
    at eval (vee-validate.esm.js?7bb1:590)
    at step (vee-validate.esm.js?7bb1:65)