インストール

インストール方法

NPM

このプラグインをインストールする推奨方法です。

npmを使用して依存関係としてインストールします

bash

npm i portal-vue

# or with yarn, respectively:
yarn add portal-vue

次に、アプリケーションにパッケージを含めてプラグインをインストールします。

javascript

import PortalVue from 'portal-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(PortalVue)

app.mount('#app')

CDN

PortalVueはいくつかのCDNから利用できます。 unpkg.com をお勧めします。

Vue.jsのスクリプトタグの後に、スクリプトタグを含めるだけです。

html

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/portal-vue"></script>

コンポーネントの名前はそれぞれ<portal>と<portal-target>になります。

ヒント

PortalVueは、ブラウザで使用されるUMD ビルド（/dist/portal-vue.umd.min.js）を提供しており、スクリプトタグを介してインクルードすると自動的にインストールされます。

Unpkgとjsdelivrは自動的にこのビルドを提供します。他のソースからインクルードする場合は、正しいものを使用してください。

オプション

Vue.use()を使用してインストールする際、オプションを渡してコンポーネント名を変更できます。

javascript

app.use(PortalVue, {
  portalName: 'my-portal', // default: 'portal'
  portalTargetName: 'my-target', // default:'portal-target'
})

これらのオプションにより、コンポーネントはそれぞれグローバルに<my-portal>と<my-target>として使用できるようになります。

コンポーネントをローカルで使用

コンポーネントをグローバルに登録したくない場合は、コンポーネントをローカルにインポートできます。ただし、プラグインをインストールする必要があります。コンポーネントオプションにはfalseを渡してください。

app.use(PortalVue, {
  portalName: false,
  portalTargetName: false,
})

その後、必要なコンポーネントでコンポーネントをインポートし、ローカルに登録します。これにより、コンポーネントの名前を変更することもできます。

javascript

import { Portal, PortalTarget } from 'portal-vue'

export default {
  components: {
    MyPortal: Portal,
    PortalTarget,
  },
}

TypeScript

Portal-Vue 3は完全なTSサポートを提供しています。コンポーネントをグローバルに登録する場合は、グローバルに登録されたこれらのコンポーネントを宣言するd.tsファイルを追加して、Vue IDE拡張機能（Volar）にそれらについて知らせる必要があります。

declare module 'vue' {  // Vue 3
    export interface GlobalComponents {
      Portal: typeof import('portal-vue')['Portal']
      PortalTarget: typeof import('portal-vue')['PortalTarget']
    }
  }
  
  export {}

このファイルをtsconfigで「include」することを忘れないでください。

カスタムWormholeインスタンス

ページに複数のVueアプリがある可能性がある場合、アプリ専用のWormholeインスタンスを作成することで名前の競合を回避できます。これは、アプリがページで実行されている他のアプリのPortalTargetコンポーネントにコンテンツを送信できないことも意味するため、おそらく特殊なケースです。

import PortalVue, { createWormhole } from 'portal-vue'
app.use(PortalVue, {
  wormhole: createWormhole()
})

ビルド

Portal-Vueは4つの異なるビルドで提供されています。

種類	ファイル	使用方法
UMD（縮小版）	`portal-vue.umd.js`	ブラウザに含めるため
UMD	`portal-vue.umd.dev.js`	ブラウザに含めるため。デバッグのために縮小されていません。
ESM	`portal-vue.esm.mjs`	ESModulesをサポートするバンドラで使用するため。

備考

UMD

CDNからPortal-vueを含める場合は、UMDビルドのいずれかを使用してください。

CDNについて：unpkg.comとjsdelivr.comは自動的にumdライブラリを読み込みます。

他のソースからHTMLに直接含める場合は、portal-vue/dist/portal-vue.umd.min.jsをインポートしてください。

ESM

Webpack >=2、rollup、parcelはすべてESModulesをネイティブに理解できるため、これらのバンドラではこれが最適なビルドです。

ESMバージョンは、"module"フィールドを理解するコンシューマー向けにpackage.jsonのデフォルトエクスポートとしてマークされています（上記のすべてのバンドラで当てはまります）。そのため、import PortalVue from 'portal-vue'を行うと、バンドラがサポートしている場合、自動的にESMビルドが提供されます。

インストール #