Vue

在 Vue 中使用 mdui 時，首先需要按照 安裝 頁面的指引完成安裝，然後進行一些必要的設定。

設定

你需要設定 Vue，不要把 mdui 元件解析為 Vue 元件。在 vite.config 檔案中，設定 compilerOptions.isCustomElement 選項即可：

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

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 所有以 mdui- 開頭的標籤名稱都是 mdui 元件
          isCustomElement: (tag) => tag.startsWith('mdui-'),
        },
      },
    }),
  ],
};

關於這個設定的詳細資訊，你可以參考 Vue 官方文件。

注意事項

雙向資料繫結

在 mdui 元件上，你不能使用 v-model 進行雙向資料繫結。你需要自行處理資料的繫結與更新。例如：

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

eslint 設定

如果你使用了 eslint-plugin-vue，需要在 .eslintrc.js 中加入以下規則：

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