Vue

Um mdui in Vue zu verwenden, müssen Sie zuerst die Installation wie auf der Installationsseite beschrieben abschließen und dann einige notwendige Konfigurationen vornehmen.

Konfiguration

Sie müssen Vue so konfigurieren, dass mdui-Komponenten nicht als Vue-Komponenten geparst werden. In der Datei vite.config setzen Sie die Option compilerOptions.isCustomElement:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Alle Tag-Namen, die mit mdui- beginnen, sind mdui-Komponenten
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Weitere Informationen zu dieser Konfiguration finden Sie in der Vue-Dokumentation.

Hinweise

Zwei-Wege-Datenbindung

Sie können v-model nicht für die Zwei-Wege-Datenbindung mit mdui-Komponenten verwenden. Sie müssen die Datenbindung und -aktualisierung selbst handhaben. Zum Beispiel:

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

eslint-Konfiguration

Wenn Sie eslint-plugin-vue verwenden, müssen Sie die folgende Regel in Ihrer .eslintrc.js hinzufügen:

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