From 3573da579cd1a8d939af96b87d9c5f75cf918a40 Mon Sep 17 00:00:00 2001
From: WoodNeck <saiyu915@naver.com>
Date: Fri, 17 Feb 2023 17:32:28 +0900
Subject: [PATCH] docs: fix vue3 example code

---
 demo/docs/options/source/projection.mdx |  3 ++-
 demo/src/components/OptionExample.tsx   |  5 +++--
 demo/src/components/code/Vue3Code.tsx   | 30 +++++++++++++++++++++++++
 demo/src/components/code/VueCode.tsx    |  8 +++----
 4 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 demo/src/components/code/Vue3Code.tsx

diff --git a/demo/docs/options/source/projection.mdx b/demo/docs/options/source/projection.mdx
index b2642c5a0..777731a87 100644
--- a/demo/docs/options/source/projection.mdx
+++ b/demo/docs/options/source/projection.mdx
@@ -27,4 +27,5 @@ const viewer = new View360("#el_id", {
     src: "/pano/equirect/veste.jpg"
   }}
   projectionType="equirect"
-  license="veste" />
+  license="veste"
+  showExampleCode />
diff --git a/demo/src/components/OptionExample.tsx b/demo/src/components/OptionExample.tsx
index 5b9f18f87..0e5c9baa2 100644
--- a/demo/src/components/OptionExample.tsx
+++ b/demo/src/components/OptionExample.tsx
@@ -7,6 +7,7 @@ import VanillaCode from "./code/VanillaCode";
 import ReactCode from "./code/ReactCode";
 import NgxCode from "./code/NgxCode";
 import VueCode from "./code/VueCode";
+import Vue3Code from "./code/Vue3Code";
 import SvelteCode from "./code/SvelteCode";
 import ProjectionData from "./code/ProjectionData";
 import OptionSerializer from "./code/OptionSerializer";
@@ -106,10 +107,10 @@ export default ({ options = {}, projectionType, projectionOptions }) => {
         <NgxCode options={options} serializer={serializer} />
       </TabItem>
       <TabItem value="vue2">
-        <VueCode vue={"vue"} options={options} serializer={serializer} />
+        <VueCode options={options} serializer={serializer} />
       </TabItem>
       <TabItem value="vue3">
-        <VueCode vue={"vue3"} options={options} serializer={serializer} />
+        <Vue3Code options={options} serializer={serializer} />
       </TabItem>
       <TabItem value="svelte">
         <SvelteCode options={options} serializer={serializer} />
diff --git a/demo/src/components/code/Vue3Code.tsx b/demo/src/components/code/Vue3Code.tsx
new file mode 100644
index 000000000..e3d96aae9
--- /dev/null
+++ b/demo/src/components/code/Vue3Code.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import CodeBlock from "@theme/CodeBlock";
+
+export default ({ options, serializer }) => {
+  const { projection, projectionOptions } = options["projection"];
+
+  const importTxt = `import { View360, ${projection} } from "@egjs/vue3-view360";`;
+
+  return <CodeBlock className="language-html">{`<template>
+  <View360 ${serializer.serializeVue(options, 2, 1)} />
+</template>
+<script>
+import { defineComponent } from "vue";
+${importTxt}
+
+export default {
+  setup() {
+    const projection = new ${projection}(${serializer.serialize(projectionOptions, 2, 2)});
+
+    return {
+      projection
+    }
+  },
+  components: {
+    View360
+  }
+}
+</script>`
+  }</CodeBlock>;
+};
diff --git a/demo/src/components/code/VueCode.tsx b/demo/src/components/code/VueCode.tsx
index cf0ce620b..f65212b65 100644
--- a/demo/src/components/code/VueCode.tsx
+++ b/demo/src/components/code/VueCode.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import CodeBlock from "@theme/CodeBlock";
 
-export default ({ vue, options, serializer }) => {
+export default ({ options, serializer }) => {
   const { projection, projectionOptions } = options["projection"];
 
-  const importTxt = `import { View360, ${projection} } from "@egjs/${vue}-view360";`;
+  const importTxt = `import { View360, ${projection} } from "@egjs/vue-view360";`;
 
   return <CodeBlock className="language-html">{`<template>
   <View360 ${serializer.serializeVue(options, 2, 1)} />
@@ -21,5 +21,5 @@ export default {
   }
 }
 </script>`
-  }</CodeBlock>
-}
+  }</CodeBlock>;
+};