Vue.js 어플리케이션 확장하기

NuxtAppProperties -> Module, NuxtAppPropertis 기반으로 builderContext을 사용하여 Nuxt 구성을 변경해준다. (Plugin도 별도 등록) -> Plugin은 context에 접근하여 Object 주입을 할 수 있다.

Nuxt 멀티 프로젝트 확장

Base Module 등록 -> 각 프로젝트에 build/module.ts import하여 Module 호출 -> 프로젝트 별 Nuxt 구성 변경

Module, Plugin

http://guide.ustraframework.kro.kr/ref-doc/03/308z0JLMBoNf9Rqd2H2g

Module의 경우 NuxtApp을 빌드할 때 필요한 설정정보를 변경할 수 있으며 Plugin의 경우 Build 후 context에 Object 주입을 하는 차이점이 있다.
Module의 경우 빌드 시 실행되며 플로그인의 경우 어플리케이션 로드 시 실행된다.

VueComponent 상속을 통한 확장

VueComponent (options) {
    this._init(options);
}

@Component 데코레이터를 통해서 VueComponent 생성자에 options으로 Object로 전달하여 VueComponent를 생성한다. extends로 상속하여도 결국 Mixins로 통합되어 하나의 Object가 생성된다.

VBtn.options.methods.click.call(this,e)

일반적인 Class처럼 this나 super를 통해서 메소드 call을 해서는 안되며 다음과 같이 Class의 options에 접근하여 메소드를 호출해야 한다.

V-Modal

Modals Class는 _showModal(), _hideModal()이 존재하며 호출 시 store에 Modal를 저장하여 어플리케이션에서 전역으로 현재 활성화된 Modal에 대한 접근이 가능하게 된다. 모바일 앱에서 Back Button을 클릭 시 현재 활성화된 Modal이 있는 지 Modal Store에 접근하여 확인할 수 있으며 존재 시 Modal을 종료하고 히스토리 Back을 진행할 수 있다.

v-dialog, v-navigation-drawer

@Component
export default class extends Mixins(Modals, VDialog) {
  // #region variables
  // #endregion
  // #region hooks
  // #endregion
  // #region methods
  hide() {
    this.$emit('input', false)
  }

  @Watch('value')
  valueChanged(value: boolean) {
    if (value) {
      // @ts-ignore
      Modals.options.methods._showModal.call(this)
    } else {
      // @ts-ignore
      Modals.options.methods._hideModal.call(this)
    }
  }
  // #endregion
  // #region watches
  // #endregion
}

v-dialog는 Mixins을 통해서 Modals와 VDidalog를 다중 상속을 받는다. VDialog의 value값을 Watch로 감지하여 활성화 및 비활성화 시 Modals의 함수를 호출하여 Modal Store에 상태를 관리한다. 뿐만아니라 모달형태로 사용하는 VNavigationDrawer에 대해서도 같은 방식으로 구현을 진행한다.