Vue

Az mdui Vue-ban való használatához először kövesse a telepítés oldal útmutatását a telepítéshez, majd végezzen el néhány szükséges konfigurációt.

Konfiguráció

Konfigurálnia kell a Vue-t, hogy ne az mdui komponenseket Vue komponensekként elemezze. A vite.config fájlban állítsa be a compilerOptions.isCustomElement opciót:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Minden mdui- előtaggal rendelkező címke mdui komponens
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

A konfiguráció részleteiről a Vue hivatalos dokumentációjában tájékozódhat.

Figyelmeztetések

Kétirányú adatkötés

Az mdui komponenseken nem használhatja a v-model-t a kétirányú adatkötéshez. Kézzel kell kezelnie az adatok kötését és frissítését. Például:

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

ESLint konfiguráció

Ha az eslint-plugin-vue-t használja, adja hozzá a következő szabályt a .eslintrc.js fájlhoz:

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