diff --git a/pages/svg-to-vue-sfc.tsx b/pages/svg-to-vue-sfc.tsx
new file mode 100644
index 0000000..4d175db
--- /dev/null
+++ b/pages/svg-to-vue-sfc.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { SvgConverter } from "@components/SvgConverter";
+import { useState } from "react";
+import { defaultSettings, formFields } from "@constants/svgoConfig";
+import { useCallback } from "react";
+import { Transformer } from "@components/ConversionPanel";
+import isSvg from "is-svg";
+import { getWorker } from "@utils/workerWrapper";
+import SvgoWorker from "@workers/svgo.worker";
+
+let prettier, svgo, svgr;
+export default function Index() {
+  const name = "SVG to Vue SFC";
+  const [settings, setSettings] = useState(defaultSettings);
+  const [optimizedValue, setOptimizedValue] = useState("");
+
+  const transformer = useCallback<Transformer>(
+    async ({ value }) => {
+      if (!isSvg(value)) throw new Error("This is not a valid svg code.");
+
+      svgo = svgo || getWorker(SvgoWorker);
+
+      let _value = value;
+
+      if (settings.optimizeSvg) {
+        _value = await svgo.send({
+          value,
+          settings
+        });
+      }
+
+      setOptimizedValue(_value);
+
+      return `
+<template>
+${_value}
+</template>
+      `;
+    },
+    [settings]
+  );
+
+  return (
+    <SvgConverter
+      transformer={transformer}
+      formFields={formFields(defaultSettings)}
+      setSettings={setSettings}
+      optimizedValue={optimizedValue}
+      settings={settings}
+      name={name}
+      resultTitle={"Vue Component"}
+    />
+  );
+}
diff --git a/utils/routes.tsx b/utils/routes.tsx
index cb19f16..b859453 100644
--- a/utils/routes.tsx
+++ b/utils/routes.tsx
@@ -18,6 +18,10 @@ export const categorizedRoutes = [
         path: "/svg-to-react-native",
         packageName: "@svgr/core",
         packageUrl: "https://github.com/smooth-code/svgr"
+      },
+      {
+        label: "to Vue SFC",
+        path: "/svg-to-vue-sfc"
       }
     ]
   },
@@ -222,7 +226,7 @@ export const categorizedRoutes = [
         label: "to Typescript",
         path: "/js-object-to-typescript",
         desc: "An online REPL for converting JS Object to Typescript."
-      },
+      }
     ]
   },
   {