Vue

Dopo aver installato mdui in Vue, dovrai apportare alcune modifiche aggiuntive.

Configurazione

Per evitare che Vue interpreti i componenti mdui come componenti Vue, dovrai modificare l'opzione compilerOptions.isCustomElement in vite.config.js:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Tratta tutti i tag che iniziano con mdui- come componenti mdui
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

Per ulteriori informazioni, consulta la documentazione ufficiale di Vue.

Note

Data Binding Bidirezionale

La direttiva v-model non può essere utilizzata per il data binding bidirezionale con i componenti mdui. Dovrai invece gestire manualmente il data binding e gli aggiornamenti. Ad esempio:

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

Configurazione di eslint

Se stai usando eslint-plugin-vue, dovrai aggiungere la seguente regola al tuo .eslintrc.js:

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