Vue

Pour utiliser mdui dans Vue, suivez d'abord les instructions de la page Installation, puis effectuez les configurations requises.

Configuration

Vous devez configurer Vue pour qu'il ne traite pas les composants mdui comme des composants Vue. Dans le fichier vite.config, définissez l'option compilerOptions.isCustomElement :

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Tous les noms de balises commençant par mdui- sont des composants mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Pour plus de détails sur cette configuration, consultez la documentation officielle de Vue.

Remarques

Liaison de données bidirectionnelle

Vous ne pouvez pas utiliser v-model sur les composants mdui. Vous devez gérer vous-même la liaison et la mise à jour des données. Par exemple :

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

Configuration eslint

Si vous utilisez eslint-plugin-vue, ajoutez la règle suivante dans .eslintrc.js :

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