[Tips] Vue.js(v3)内でWebComponentsを使うための設定

# 当時の環境
% npm ls vue vue-loader --depth=1
hoge
├─┬ @vue/[email protected]
│ └── [email protected]
├─┬ @vue/[email protected]
│ └── [email protected]

SFC(Vue3)内で Web Components を

<template>
  <hoge-web-component></hoge-web-component>
</template>

という感じで使おうとすると、

[Vue warn]: Failed to resolve component: hoge-web-component

と warn が出ます。 Vue のコンポーネントとして定義・import していないので、そりゃそうですね…。

web components [Vue warn]: Failed to resolve component: xy-button” #1221 で回答されている通り、 isCustomElement を使えばいいわけですが、issues 上の方法のままでは解消出来なかったです。

公式ドキュメントを見る

Global API - config.ignoredElements Is Now config.isCustomElement によると、 Vue3 ではコンポーネントのチェックをコンパイル時に行うので、使用する Web Components をコンパイラーに教える必要があります。

issues 上のapp.config.isCustomElementは、コンパイラーも内蔵した vue のビルド成果物を使用するとき用の API です。 そのため、テンプレートを事前にコンパイルしている(ランタイムのみの vue ビルド成果物を使用している)場合は vue-cli に内蔵している vue-loader に chainWebpack で option を追加して、Web Components を教えます。

webpack の設定を上書きする

npx vue inspect --rule vue で現状を確認して、 標準出力されている通り、config.module.rule('vue').use('vue-loader')で上書きします。

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options,
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("hoge-"),
        },
      }));
  },
};

これで prefix が hoge-な Web Components は vue コンパイラーのお目通しのうえ、custom elements(Web Components) として使用できるようになりました。

やったぜ 💪