docs: fix vue3 example code

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 />

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} />

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>;
+};

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>;
+};