Vue

При использовании mdui в Vue сначала следуйте инструкциям по установке, а затем выполните необходимые настройки.

Настройка

Вам нужно настроить Vue так, чтобы он не рассматривал компоненты mdui как компоненты Vue. В файле vite.config установите опцию compilerOptions.isCustomElement:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Все имена тегов, начинающиеся с mdui-, являются компонентами mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Более подробную информацию об этой настройке можно найти в официальной документации Vue.

Примечания

Двустороннее связывание данных

Вы не можете использовать v-model для двустороннего связывания данных на компонентах mdui. Вам нужно самостоятельно обрабатывать привязку и обновление данных. Например:

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

Настройка eslint

Если вы используете eslint-plugin-vue, добавьте следующее правило в .eslintrc.js:

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