vue 別ウインドウコンポーネントを表示

jsでブラウザから別のウインドウを開く機能があるが、今回はそれをVueで行う。

そしてさらにvueコンポーネントをその別ウインドウに乗せる方法を解説する。

方法としてはjs自体のメソッド（window.open）でブラウザの別ウインドウを開き、

そのウインドウにvueのコンポーネントを乗せるといった具合である。

以下参考

Window: open() メソッド - Web API | MDN

open() は Window インターフェイスのメソッドで、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 iframe、タブ) に読み込みます。

以下にサンプルコードを記載する

別ウインドウを開く処理を行うvueファイル

<!-- Base.vue （親）-->
<template>
  <div>
    <button @click="openOtherWindow">別ウインドウを開く</button>
  </div>
</template>

<script>
import { createApp } from "vue";
import OtherWindowComponent from "@/components/OtherWindowComponent.vue";
export default {
  date() {
    return {
      otherWindow: null,
      otherVueInstance: null,
    },
  },
  methods: {
    openOtherWindow() {
      // 1, 別ウインドウを開く （別ウインドウ情報をvue変数に代入する）
      this.otherWindow = window.open("", "windowName", "width=1920, height=1080");
      
      // 2, 別ウインドウにvueコンポーネントを乗せる土台となるDOMを生成する
      const otherDiv = this.otherWindow.document.createElement("div");
      otherDiv.id = "other-app"
      this.otherWindow.document.body.appendChild(otherDiv);
      
      // 3, vueインスタンスを生成しコンポーネントを乗せる （インスタンス情報はvue変数に代入する）
      this.otherVueInstance = createApp(OtherWindowComponent).mount(otherDiv);
      
    },
  },
};
</script>

別ウインドウにバインドするvueファイル

※このファイル自体は特筆すべき点はない

<!-- OtherWindowComponent.vue （子）-->
<template>
  <div>
   <p>子コンポーネント</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
    
    }
  },
  methods: {
    
    },
  },
};
</script>

このようにすると、新しく開いたウインドウにvueのコンポーネントの内容を表示することができる。