Nuxt.js로 plugin을 쾌적하게 운용한다 ( 타입 정의 파일의 구현)

Nuxt with js로 개발하고 있을 때, 예를 들면 아래와 같이 ~/plugins/api.js 를 구현하고 싶다.

~/plugins/api.js
export default function ({ }, inject) {
  const api = new API()

  inject('api', api)
}

class API {
  executeSomething() {
    return 'Hello world!'
  }
}


이 API 플러그인을 ~/nuxt.config.js에 등록하고,

~/nuxt.config.js

// 中略
  plugins: [
    { src: './plugins/api.js' }
  ]


pages등으로 사용하려고 하면...보완이 효과가 없다.



대응책


  • ~/plugins/api.d.ts 만들기

  • ~/plugins/api.d.ts
    export declare interface api {
      executeSomething(): String
    }
    
  • 프로젝트 루트에 index.d.ts 만들기

  • ~/index.d.ts
    import Vue from 'vue'
    import { api } from './plugins/api'
    
    declare module 'vue/types/vue' {
      interface Vue {
        $api: api
      }
    }
    

    와이🙌

    좋은 웹페이지 즐겨찾기