Nuxt3でのAzure Application Insights ライブメトリクス表示方法について

実現したいこと

Nuxt3で作成したWebアプリをAzure Application Insights ライブメトリクス上に表示させたい。

発生している問題・分からないこと

Azure Application Insightsは作成したアプリと接続でき、トランザクションの検索からデータは取得できているが、ライブメトリックが表示されない。
tsでの実現方法を模索していたため、可能であればtsファイルでの実現させたい。

該当のソースコード

TypeScript

1import { ApplicationInsights } from "@microsoft/applicationinsights-web";2 3export default defineNuxtRouteMiddleware(async (to, from) => {4 const appInsights = new ApplicationInsights({5 config: {6 connectionString:7 "InstrumentationKey=",8 /* ...Other Configuration Options... */9 },10 });11 appInsights.loadAppInsights();12 appInsights.trackPageView();13 14 //export custom event15 appInsights.trackEvent({16 name: "test",17 properties: { customProperty: "test" },18 });19});20 21

試したこと・調べたこと

上記の詳細・結果

下記オプションを追加すると表示されるとの記事を見つけ、記載してみたが使用ライブラリにはそもそも該当のオプションは無いようでできなかった。

TypeScript

1const appInsights = new ApplicationInsights({ config: {2 instrumentationKey: '06cb6361-b98d-4003-****-************',3 distributedTracingMode: DistributedTracingModes.W3C,4 enableCorsCorrelation : true,5} });

jsに拡張子を変更し公式ガイドにのっとり実行した結果Rollupエラーと表示。

補足

node 20.11.0
nuxt 3.11.1
vue 3.4.21
当該ファイルはmiddlewareの中に作成していました。pagesのvueファイルの中で公式のコードを実行した結果The "original" argument must be of type Functionと表示。

始めての質問のため不足情報など気軽に教えていただけると助かります。