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'
}