Nuxt3でメゾットを外部から呼び出す

アプリのwebview制作で、Nativeアプリから、webview内の関数を呼び出したい時
vue内で書いた関数を呼び出せるようにしたい
結構調べたけれど、着地するのに時間がかかったのでメモです

作業環境

• Nuxt.js（v3.6.5）

分からなさすぎて、試しにChatGPTに聞いてみた

webviewの実装で、ネイティブアプリ側からjavascriptsの関数名を呼び出す場合、インスタンスの外からメソッドを呼ぶ方法を教えてください

と聞いてみたら、

🤖 Webview内でネイティブアプリからJavaScriptの関数を呼び出す場合、Vueコンポーネント内のメソッドも同様に呼び出すことができます。
ただし、<script setup> ブロック内で定義されたメソッドを外部から直接呼び出すことは、コンポーネントの構造上やセキュリティ上の理由から推奨されていません。
代わりに、特定のメソッドを介してやり取りを行う方が安全です。

以下は、Vueコンポーネント内でネイティブアプリから呼び出すための安全なアプローチの例です。

<template>
  <div>
    <!-- コンポーネントの内容 -->
  </div>
</template>

<script setup lang="ts">
const someValue = ref<string>('');

// ネイティブアプリから呼び出されるメソッド
const handleNativeCall = (valueFromNative: string): void => {
  // メソッドの実装
  someValue.value = valueFromNative;
};

// Vueコンポーネントがマウントされた後に実行されるコード
onMounted(() => {
  // ネイティブアプリにコンポーネントが準備完了であることを通知
  window.postMessage('componentReady', '*');
  
  // ネイティブアプリから呼び出されるメソッドをグローバルスコープに登録
  (window as any).handleNativeCall = handleNativeCall;
});
</script>

上記の例では、ネイティブアプリから呼び出すための handleNativeCall メソッドをグローバルスコープに登録し、onMounted ライフサイクルフック内でVueコンポーネントのマウントが完了した際に、ネイティブアプリに準備完了の通知を送信しています。

ネイティブアプリ側から、Webview内のJavaScriptコードを呼び出す場合は、Webview内部のJavaScript環境と通信チャネルを確立して、コンポーネントのメソッドを呼び出すことが一般的です。
具体的な方法は、ネイティブアプリとWebviewの実装によって異なる場合がありますが、一般的なアプローチは通信チャネルを介してデータをやり取りすることです。

だそうです

window.postMessage('componentReady', '*'); の部分は
Nativeアプリとの連携箇所になるので、ここは連携して書き換える必要あり

おまけ

いろいろ調べたけれど、Nuxt3での内容が見つけられる、
最終的にはChatGPTに聞いてみたら上手く行きました
ただし、Nuxt3の情報は知らないので、工夫して聞く必要がありで、Vue3で聞くと良き

余談

なんでwebview作る時Nuxt.jsなの？今ならReact.jsとかNext.jsじゃね？って思う人居るかもなので
それはNuxtがNextより好きだからです＾＾