Vue

Para usar mdui en Vue, primero debes seguir las instrucciones de la página de instalación para completar la instalación, y luego realizar algunas configuraciones necesarias.

Configuración

Debes configurar Vue para que no analice los componentes de mdui como componentes de Vue. En el archivo vite.config, establece la opción compilerOptions.isCustomElement:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Todas las etiquetas que comiencen con mdui- son componentes de mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Para obtener más información sobre esta configuración, consulta la documentación oficial de Vue.

Notas importantes

Enlace de datos bidireccional

No puedes usar v-model para el enlace de datos bidireccional en los componentes de mdui. Debes manejar manualmente el enlace y la actualización de los datos. Por ejemplo:

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

Configuración de eslint

Si usas eslint-plugin-vue, debes agregar la siguiente regla en .eslintrc.js:

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