Vue

Vue'da mdui kullanırken, öncelikle Kurulum sayfasındaki yönergeleri izleyerek kurulumu tamamlamanız ve ardından bazı gerekli yapılandırmaları yapmanız gerekir.

Yapılandırma

Vue'yu, mdui bileşenlerini Vue bileşenleri olarak ayrıştırmayacak şekilde yapılandırmanız gerekir. vite.config dosyasında compilerOptions.isCustomElement seçeneğini ayarlamanız yeterlidir:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // mdui- ile başlayan tüm etiket adları mdui bileşenleridir
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Bu yapılandırma hakkında daha fazla bilgi için Vue resmi belgelerine başvurabilirsiniz.

Önemli Notlar

Çift Yönlü Veri Bağlama

mdui bileşenlerinde, çift yönlü veri bağlama için v-model kullanamazsınız. Veri bağlama ve güncellemeyi kendiniz yönetmeniz gerekir. Örneğin:

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

eslint yapılandırması

eslint-plugin-vue kullanıyorsanız, .eslintrc.js dosyasına aşağıdaki kuralı eklemeniz gerekir:

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