Vue

Ao usar mdui no Vue, primeiro instale seguindo as instruções na página Instalação e, em seguida, faça algumas configurações necessárias.

Configuração

Você precisa configurar o Vue para que ele não interprete os componentes mdui como componentes Vue. No arquivo vite.config, defina a opção compilerOptions.isCustomElement:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Todas as tags que começam com mdui- são componentes mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Para mais informações sobre esta configuração, consulte a documentação oficial do Vue.

Notas

Ligação de dados bidirecional

Em componentes mdui, você não pode usar v-model para ligação bidirecional de dados. Você precisa lidar manualmente com a vinculação e atualização dos dados. Por exemplo:

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

Configuração do eslint

Se você estiver usando eslint-plugin-vue, adicione a seguinte regra em .eslintrc.js:

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