## 事象
`CodeBlockV2.vue` を作成する。
```html
<script setup lang="ts">
import * as monaco from "monaco-editor";
import "prismjs/components/prism-json";
import "prismjs/themes/prism.css";
import { onMounted, ref } from "vue";
type Language = "json";
const props = defineProps<{
content: string;
language: Language;
}>();
const editorEl = ref<HTMLDivElement | null>(null);
onMounted(() => {
monaco.editor.create(editorEl.value!, {
value: props.content,
language: "json",
automaticLayout: true,
readOnly: true,
});
});
</script>
<template>
<div ref="editorEl"></div>
</template>
```
`prettyResponseBody` には[[JSON]]文字列が入っており、それをデータとして流し込む。
```html
<template>
<CodeBlockV2
:content="prettyResponseBody"
language="json"
class="h-[calc(100vh_-_20rem)]"
/>
</template>
```
[[Monaco Editor]]に[[JSON]]は表示されるが、折りたたみ・展開のボタンが表示されない。
`main.ts`
```ts
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
createApp(App).mount("#app");
```
エラーは以下。
```error
You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker
```
### 環境
| 対象 | バージョン |
| ----------------- | ---------- |
| [[macOS]] | 15.7.2 |
| [[Monaco Editor]] | 0.55.1 |
| [[Vue]] | 3.5.24 |
## 原因
[[Monaco Editor]]の[[ウェブワーカー]]を初期化していないから。
## 解決方法
`main.ts` を書き換えて `getWorker` が Worker系[[インスタンス (JavaScript)|インスタンス]]を返すようにする。
```ts
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import { match } from "ts-pattern";
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
// @ts-ignore
self.MonacoEnvironment = {
getWorker: (_: any, label: string) =>
match(label)
.with("json", () => new jsonWorker())
.otherwise(() => new editorWorker()),
};
createApp(App).mount("#app");
```
## 参考
- [Vue3 + Vite で Monaco Editor の Web Worker を設定する](https://zenn.dev/comm_vue_nuxt/articles/b1129cfca569ec)