Vue

After completing the installation of mdui in Vue, you'll need to perform some additional configurations.

Configuration

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

// 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'
}
MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons