Vue

Vue에서 mdui를 사용할 때는 먼저 설치 페이지의 지침에 따라 설치를 완료한 후 몇 가지 필요한 구성을 수행해야 합니다.

구성

Vue가 mdui 컴포넌트를 Vue 컴포넌트로 파싱하지 않도록 구성해야 합니다. vite.config 파일에서 compilerOptions.isCustomElement 옵션을 설정하면 됩니다:

// vite.config.js
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // mdui-로 시작하는 모든 태그 이름은 mdui 컴포넌트입니다
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

이 구성에 대한 자세한 내용은 Vue 공식 문서를 참조하세요.

참고 사항

양방향 데이터 바인딩

mdui 컴포넌트에서는 v-model을 사용하여 양방향 데이터 바인딩을 할 수 없습니다. 데이터 바인딩과 업데이트를 직접 처리해야 합니다. 예시:

<mdui-text-field
  :value="name"
  @input="name = $event.target.value"
></mdui-text-field>

eslint 구성

eslint-plugin-vue를 사용하는 경우 .eslintrc.js에 다음 규칙을 추가해야 합니다:

rules: {
  'vue/no-deprecated-slot-attribute': 'off'
}