Nuxt (Options API)에서 TypeScript를 사용할 때 middleware 및 layout 옵션을 사용하려면

Nuxt에서 TypeScript를 사용하는 방법으로 Options API, Composition API

이번에는 Options API를 사용하기로 결정했습니다.

환경


  • Docker version 20.10.2
  • docker-compose version 1.27.4
  • node v12.20.1
  • yarn 1.22.5
  • Nuxt.js v2.14.12
  • Visual Studio Code version 1.53.2
  • Vetur 0.32.0 (VSCode Extention: Vue tooling for VS Code)

  • middleware 또는 layout 옵션을 사용하려고 할 때 나오는 오류



    각 페이지 내에서 middleware 및 layout 옵션을 사용하려고했는데,
    클래스 APINo overload matches this call. 와서 오류가 발생했습니다.

    해결책



    공식 페이지 가 참고가 되었습니다.
    Project
     ├─ api
     ├─ app // ← Nuxt を使っているディレクトリ
     ├─ db
     ├─ nginx
     └─ docker-compose.yml
    

    ↑ 이번의 경우는 이러한 계층으로 되어 있어 작업 디렉토리는 app 입니다.

    거기서
    Project
     ├─ api
     ├─ app
     ├─ db
     ├─ nginx
     ├─ docker-compose.yml
     └─ vetur.config.js // ← 追加
    
    vetur.config.js 추가,

    vetur.config.js
    // vetur.config.js
    /** @type {import('vls').VeturConfig} */
    module.exports = {
      // **optional** default: `[{ root: './' }]`
      // support monorepos
      projects: ['./app']
    }
    

    ↑ 이렇게 기술하고 VSCode를 재시작하면,

    오류를 해결할 수 있습니다.
  • VSCode의 확장 Vetur을 사용하고 있습니다
  • 이번 Nuxt를 사용하고 있다 app 디렉토리 외에 api db
    그 이유는 Vetur가 폴더를 올바르게 구문 분석하지 못했기 때문인 것 같습니다.

    형식 정의 파일



    추가 형식 정의 파일을 준비하면 VSCode에서 예측 변환을 수행할 수 있습니다.
    이 기사 코멘트 을 참고하여 nginx 의 형식을 덮어썼습니다.

    이번은 ComponentOptions 를 준비해 이하와 같은 내용으로 했습니다.

    app/types/index.d.ts
    import { Context, Middleware } from '@nuxt/types'
    import Vue from 'vue'
    
    declare module 'vue/types/options' {
      interface ComponentOptions<V extends Vue> {
        layout?: string | ((ctx: Context) => string)
        middleware?: Middleware | Middleware[]
      }
    }
    

    VSCode를 재시작하면 app/types/index.d.ts 에서 Vue.extend({}) layout 옵션도 예측 변환으로 나오게 됩니다.



    참고


  • 이 기사
  • 좋은 웹페이지 즐겨찾기