Vue

Używając mdui w Vue, najpierw postępuj zgodnie z instrukcjami na stronie Instalacja, a następnie wykonaj niezbędną konfigurację.

Konfiguracja

Musisz skonfigurować Vue, aby nie parsowało komponentów mdui jako komponentów Vue. W pliku vite.config ustaw opcję compilerOptions.isCustomElement:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // wszystkie nazwy znaczników zaczynające się od mdui- to komponenty mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Więcej informacji na temat tej konfiguracji znajdziesz w oficjalnej dokumentacji Vue.

Uwagi

Dwukierunkowe wiązanie danych

Nie możesz używać v-model do dwukierunkowego wiązania danych na komponentach mdui. Musisz samodzielnie obsłużyć wiązanie i aktualizację danych. Na przykład:

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

Konfiguracja eslint

Jeśli używasz eslint-plugin-vue, dodaj następującą regułę w pliku .eslintrc.js:

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