Vue

Vueアプリ内でCustom Elementライブラリを使用するには、Custom Elementを定義し、コンパイル時に無視するようにVueコンパイラーの設定を変更する必要があります。これは全てmain.jsファイル内で行うことができます。

Webコンポーネントをtest-componentという名前でnpmに公開し、事前にnpm install --save test-componentsを実行した想定で、main.jsファイルにコンポーネントをインポートします。

nodeモジュールをインポート
VueにCustom Elementのタグを無視するように指定する（docsを参照）
Stencilコンポーネントのコードをwindowオブジェクトにバインドする

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from 'test-components/loader';

Vue.config.productionTip = false;

// Vueでtest-componentsパッケージで定義されたすべてのコンポーネントを無視するように指定します
// 正規表現で、すべてのコンポーネント名の開始に`test`が付いていることを想定しています
Vue.config.ignoredElements = [/test-\w*/];

// Custom Elementをwindowオブジェクトにバインドする
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App)
}).$mount('#app');

これで、コンポーネントがVueコンポーネントで利用可能になります。

render() {
  return (
    <div>
      <test-stencil-component></test-stencil-component>
    </div>
  )
}

Vueは、アプリケーションにフレームワークをインストールして使用するための方法をいくつか提供しています。Stencil Custom Elementライブラリを連携するための方法は、vue-cliでES2015およびWebpackをプライマリオプションとして作成されたVueアプリケーションでテストされています。他のオプションを使用してアプリケーションを生成した場合も、同様の方法で機能するはずです。

Back

Contributors

Submit an edit

Vue

Contributors

Thanks for your interest!