Vue

Při používání mdui ve Vue je nejprve nutné dokončit instalaci podle pokynů na stránce Instalace a poté provést některá potřebná nastavení.

Konfigurace

Je nutné nakonfigurovat Vue tak, aby nerozpoznávalo komponenty mdui jako Vue komponenty. V souboru vite.config nastavte možnost compilerOptions.isCustomElement:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Všechny názvy značek začínající na mdui- jsou komponenty mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Podrobnosti o této konfiguraci najdete v oficiální dokumentaci Vue.

Poznámky

Obousměrná datová vazba

Na komponentách mdui nelze použít v-model pro obousměrnou datovou vazbu. Je nutné ručně zpracovat vazbu a aktualizaci dat. Například:

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

Konfigurace eslint

Pokud používáte eslint-plugin-vue, je nutné do souboru .eslintrc.js přidat následující pravidlo:

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