Vue

After installing mdui in Vue, you'll need to make a few additional changes.

Configuration

To prevent Vue from interpreting mdui components as Vue components, you'll need to adjust the compilerOptions.isCustomElement option in vite.config.js:

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Treat all tags starting with mdui- as mdui components
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

For more information, please refer to the Vue official documentation.

Notes

Two-way Data Binding

The v-model directive cannot be used for two-way data binding with mdui components. Instead, you'll need to manually manage data binding and updates. For example:

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

eslint Configuration

If you're using eslint-plugin-vue, you'll need to add the following rule to your .eslintrc.js:

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