diff --git a/client/components/document/index.tsx b/client/components/document/index.tsx
index 52b31799..f77b0b8f 100644
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@@ -9,12 +9,16 @@ import Tooltip from "@geist-ui/core/dist/tooltip"
 
 import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react"
 import styles from './document.module.css'
-import MarkdownPreview from '../preview'
 import Trash from '@geist-ui/icons/trash'
 import Download from '@geist-ui/icons/download'
 import ExternalLink from '@geist-ui/icons/externalLink'
 import FormattingIcons from "./formatting-icons"
 import Skeleton from "react-loading-skeleton"
+
+import dynamic from "next/dynamic";
+
+const MarkdownPreview = dynamic(() => import("../preview"))
+
 // import Link from "next/link"
 type Props = {
     editable?: boolean
diff --git a/client/components/new-post/drag-and-drop/index.tsx b/client/components/new-post/drag-and-drop/index.tsx
index 25de2bd7..611e8dc6 100644
--- a/client/components/new-post/drag-and-drop/index.tsx
+++ b/client/components/new-post/drag-and-drop/index.tsx
@@ -91,6 +91,8 @@ const allowedFileExtensions = [
     'sql',
     'xml',
     'webmanifest',
+    'vue',
+    'vuex',
 ]
 
 function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
diff --git a/client/components/post-page/index.tsx b/client/components/post-page/index.tsx
index 8d846101..9e66ce08 100644
--- a/client/components/post-page/index.tsx
+++ b/client/components/post-page/index.tsx
@@ -5,7 +5,6 @@ import Page from "@geist-ui/core/dist/page"
 import Button from "@geist-ui/core/dist/button"
 import Text from "@geist-ui/core/dist/text"
 import DocumentComponent from '@components/document'
-import { downloadZip } from 'client-zip'
 import styles from './post-page.module.css'
 
 import type { Post, ThemeProps } from "@lib/types"
@@ -16,7 +15,7 @@ type Props = ThemeProps & {
 
 const PostPage = ({ post, changeTheme, theme }: Props) => {
     const download = async () => {
-
+        const downloadZip = (await import("client-zip")).downloadZip
         const blob = await downloadZip(post.files.map((file: any) => {
             return {
                 name: file.title,
diff --git a/client/components/preview/react-markdown-preview.tsx b/client/components/preview/react-markdown-preview.tsx
index 5507aae2..319b4bb0 100644
--- a/client/components/preview/react-markdown-preview.tsx
+++ b/client/components/preview/react-markdown-preview.tsx
@@ -1,4 +1,3 @@
-import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-async-light';
 import rehypeSlug from 'rehype-slug'
@@ -11,6 +10,8 @@ import styles from './preview.module.css'
 import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus'
 import light from 'react-syntax-highlighter/dist/cjs/styles/prism/vs'
 import useSharedState from "@lib/hooks/use-shared-state";
+import ReactMarkdown from "react-markdown";
+
 
 type Props = {
     content: string | undefined
@@ -19,6 +20,7 @@ type Props = {
 
 const ReactMarkdownPreview = ({ content, height }: Props) => {
     const [themeType] = useSharedState<string>('theme')
+
     return (<div style={{ height }}>
         <ReactMarkdown className={styles.markdownPreview}
             remarkPlugins={[remarkGfm]}