DEV Community: Fang Tanbamrung

🔥 Building a Simple PDF AI Chat app with Next.js, React PDF and OpenAI 💬

Fang Tanbamrung — Tue, 19 Aug 2025 13:43:54 +0000

AI is showing up everywhere these days, and one great use is real-time answers from PDFs. From contracts and manuals to compliance reports, PDFs remain a crucial component in business workflows. But searching for answers or details inside long documents can be tedious and time consuming.

With a PDF AI Chat app, you can:

Ask questions about a document and get accurate responses fast.
Highlight text and get context-aware answers from AI.
Copy key details or insights with one click.

For companies, this can mean faster onboarding, quicker report reviews, and less back-and-forth over document details.

In this walkthrough, we'll cover how to build a PDF chat app that let users talk to an AI about the contents of any PDF, right inside a web browser. If you’re a React.js developer wanting to explore document chat workflows, you’ll find this tutorial practical.

Here's a list of tools you’ll need:

Next.js for the app framework
React PDF to show PDFs directly in the browser
OpenAI for the chat backend
Tailwind CSS for easy styling

A quick introduction about us. React PDF lets you display PDF files directly inside your React.js or Next.js projects. With more than 20 built-in features like a default toolbar, easy customization and responsive layouts, your users can view and work with PDFs without leaving your app.

You can add a React PDF Viewer component to all kinds of projects. Use it in document systems, workflow tools, AI apps or as a simple PDF reader. It's flexible and fits right in wherever you need to show or manage PDF files.

Part 1 - Set up Your App

Step 1: Initialize a new Next.js project with Tailwind CSS:

npx create-next-app@latest

Step 2: Install required libraries:

npm install @pdf-viewer/react eventsource-parser openai react-markdown

Here's what each does:

@pdf-viewer/react: Display PDFs in your app.
eventsource-parser: Handle event streams for live AI responses.
openai: Connect to the OpenAI API.
react-markdown: Render markdown content from AI replies.

Part 2 - Set Up a PDF Viewer Infrastructure

Start by creating a provider and React PDF Viewer component using @pdf-viewer/react. The library lets users open and read PDFs inside your app, with features like built-in toolbars and a responsive design. It works with both simple readers and advanced workflows.

Step 1: Create a PDF Provider Component

// AppProviders.tsx
"use client";
import { RPConfig, RPConfigProps } from "@pdf-viewer/react";
import { type PropsWithChildren } from "react";

function AppProviders({
  children,
  ...props
}: PropsWithChildren<RPConfigProps>) {
  return <RPConfig {...props}>{children}</RPConfig>;
}
export default AppProviders;

Step 2: Create a React PDF Viewer Component

// AppPdfViewer.tsx
"use client";
import { RPProvider, RPDefaultLayout, RPPages } from "@pdf-viewer/react";
import { Ref } from "react";

const AppPdfViewer = ({ ref }: { ref?: Ref<HTMLDivElement> }) => {
  return (
    <div ref={ref}>
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
        <RPDefaultLayout style={{ height: "100vh" }}>
          <RPPages />
        </RPDefaultLayout>
      </RPProvider>
    </div>
  );
};

export default AppPdfViewer;

Step 3: Dynamically Import Viewer Components for Client-Side Rendering

Since PDF.js workers must be run on client-side only, you can use next/dynamic to import your PDF components to prevent SSR errors.

// LazyAppPdfViewer.tsx

"use client";
import dynamic from "next/dynamic";

const LazyAppPdfViewer = dynamic(() => import("./AppPdfViewer"), {
  ssr: false,
});
export default LazyAppPdfViewer;

// LazyAppProviders.tsx
"use client";
import dynamic from "next/dynamic";

const LazyAppProviders = dynamic(() => import("./AppProviders"), {
  ssr: false,
});
export default LazyAppProviders;

Step 4: Configure Layout with Providers

Apply the PDF provider globally via your layout.tsx file.

// layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="antialiased">
        <LazyAppProviders licenseKey="your-license-key">
          {children}
        </LazyAppProviders>
      </body>
    </html>
  );
}

For more information on how to use React PDF, check out the Basic usage guide.

Part 3: Create a Main Application Layout

To make the chat experience smooth, you’ll want these 4 components:

Dropdown for text selection
Loading indicator
Chat input
Chat interface

Create Four Supporting Components

Step 1: Dropdown for Text Selection Component

Pop up when users highlight text in the PDF. Options include “Ask” (send a question about the selected text to AI) and “Copy” (save the text to clipboard)

// SelectDropDown.tsx

import { useCallback } from "react";

interface SelectDropDownProps {
  position: {
    x: number;
    y: number;
  };
  show: boolean;
  onAsk: () => void;
  onCopy: () => void;
}

export const SelectDropDown = ({
  position,
  show,
  onAsk,
  onCopy,
}: SelectDropDownProps) => {
  const handleAsk = useCallback(() => {
    onAsk();
  }, [onAsk]);
  const handleCopy = useCallback(() => {
    onCopy();
  }, [onCopy]);

  if (!show) return null;

  return (
    <div
      className="absolute"
      style={{ top: `${position.y}px`, left: `${position.x}px` }}
    >
      <ul className="bg-white border border-gray-200 rounded-md p-2">
        <li className="cursor-pointer hover:bg-gray-100" onClick={handleAsk}>
          Ask
        </li>
        <li className="cursor-pointer hover:bg-gray-100" onClick={handleCopy}>
          Copy
        </li>
      </ul>
    </div>
  );
};

Step 2: Loading Indicator Component

This appears when the AI is working on a response

// LoadingIcon.tsx

export const LoadingIcon = () => {
  return (
    <svg
      width="1em"
      height="1em"
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="#555555"
        strokeWidth="10"
        fill="none"
        strokeLinecap="round"
        strokeDasharray="209.44"
        strokeDashoffset="0"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 50 50"
          to="360 50 50"
          dur="1s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  );
};

Step 3: Chat Input Component

Let's users send questions, either based on selected text or general queries about the document.

// Input.tsx

"use client";
import { useCallback, Ref, useRef } from "react";

interface InputProps {
  onSubmit?: (value: string) => void;
  onClearContext?: () => void;
  ref?: Ref<HTMLDivElement>;
  context?: string;
}

export const Input = ({
  ref,
  onSubmit,
  context,
  onClearContext,
}: InputProps) => {
  const inputRef = useRef<HTMLDivElement>(null);

  const handleSubmit = useCallback(() => {
    const textValue = inputRef.current?.innerText;
    if (onSubmit && textValue) {
      onSubmit(textValue);
      inputRef.current!.innerText = "";
    }
  }, [onSubmit]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      // if press Enter only it will send question to server
      // allow new line by shift + enter
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        handleSubmit();
      }
    },
    [handleSubmit]
  );

  return (
    <div ref={ref} className="p-1">
      {context && (
        <div className="text-sm border-t border-gray-300 px-2">
          <div className="flex justify-between">
            Ask about:{" "}
            <span onClick={onClearContext} className="cursor-pointer">
              X
            </span>
          </div>
          <div className="text-gray-500">{context}</div>
        </div>
      )}
      <div className="flex border-t border-gray-300">
        <p
          ref={inputRef}
          className="w-3/4"
          contentEditable
          suppressContentEditableWarning
          onKeyDown={handleKeyDown}
        ></p>
        <button
          onClick={handleSubmit}
          className="w-1/4 border-l border-gray-300"
        >
          Submit
        </button>
      </div>
    </div>
  );
};

Step 4: Chat Interface Component

This component manages the entire conversation:

Shows Q&A messages
Streams answers in real time
Updates dynamically with markdown formatting
Adjusts height responsively based on the input area


// Chat.tsx

"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { Input } from "./Input";
import Markdown from "react-markdown";
import { LoadingIcon } from "./LoadingIcon";
import { EventSourceParserStream } from "eventsource-parser/stream";

// message item for question and answer
const Item = ({
  type,
  content,
}: {
  type: "question" | "answer";
  content: string;
}) => {
  return (
    <div
      className={`flex ${
        type === "question" ? "justify-end" : "justify-start"
      } w-full`}
    >
      <div
        className={`px-2 max-w-2/3 my-2 py-1 rounded ${
          type === "question" ? "bg-neutral-200" : "bg-neutral-400"
        }`}
      >
        {/* render markdown content that will be received from ai */}
        <Markdown>{content}</Markdown>
      </div>
    </div>
  );
};

interface ChatProps {
  context?: string;
  onClearContext?: () => void;
}

export const Chat = ({ context, onClearContext }: ChatProps) => {
  const [inputRef, setInputRef] = useState<HTMLDivElement | null>(null);
  const [messages, setMessages] = useState<
    { id: string; type: "question" | "answer"; content: string }[]
  >([]);
  const [loading, setLoading] = useState(false);
  const messageRef = useRef<string>("");
  const currentMessageIndexRef = useRef<number>(0);
  const [conversationHeight, setConversationHeight] = useState<string>("100vh");

  useEffect(() => {
    if (!inputRef) return;
    const observer = new ResizeObserver((entries) => {
      setConversationHeight(`calc(100vh - ${entries[0].contentRect.height}px)`);
    });
    observer.observe(inputRef);
    return () => {
      observer.disconnect();
    };
  }, [inputRef]);

  const handleSubmit = useCallback(
    async (value: string) => {
      setLoading(true);
      messageRef.current = "";
      setMessages((prev) => {
        // set message index to be appended when answer is received
        currentMessageIndexRef.current = prev.length + 1;
        return [
          ...prev,
          { id: Date.now().toString(), type: "question", content: value },
        ];
      });
      if (onClearContext) {
        onClearContext();
      }
      // get message from openai
      const response = await fetch("/api/ai", {
        method: "POST",
        body: JSON.stringify({ question: value, context }),
        headers: {
          "Content-Type": "application/json",
        },
      });
      // read event stream
      const reader = response.body
        ?.pipeThrough(new TextDecoderStream())
        .pipeThrough(new EventSourceParserStream())
        .getReader();
      try {
        while (true) {
          if (!reader) {
            throw new Error("Reader is not defined");
          }
          const { done, value } = await reader.read();
          if (done || value.data === "[DONE]") {
            reader.cancel();
            break;
          }
          const newMessage = value.data;
          // append new message to the current message
          messageRef.current = messageRef.current + newMessage;
          setMessages((prev) => {
            if (prev[currentMessageIndexRef.current]) {
              return prev.map((message, index) => {
                if (index === currentMessageIndexRef.current) {
                  return {
                    ...message,
                    content: messageRef.current,
                  };
                }
                return message;
              });
            }
            return [
              ...prev,
              {
                id: Date.now().toString(),
                content: messageRef.current,
                type: "answer",
              },
            ];
          });
        }
      } catch (error) {
        console.error(error);
      }
      setLoading(false);
    },
    [context, onClearContext]
  );

  return (
    <div className="h-full relative">
      {loading && (
        <div className="w-full h-full bg-neutral-400/30 absolute inset-0 flex items-center justify-center">
          <div className="spin text-5xl">
            <LoadingIcon />
          </div>
        </div>
      )}
      <div
        className="overflow-y-auto"
        style={{
          height: conversationHeight,
        }}
      >
        <div className="p-1">
          {messages.map((ele) => (
            <Item key={ele.id} type={ele.type} content={ele.content} />
          ))}
        </div>
      </div>
      {/* avoid rerender when input height change due to new line */}
      <div className="absolute bottom-0 w-full">
        <Input
          context={context}
          onSubmit={handleSubmit}
          onClearContext={onClearContext}
          ref={setInputRef}
        />
      </div>
    </div>
  );
};

Step 5: Combine PDF Viewer and Chat Interface

At this stage, you’ll combine everything into a unified experience:

The PDF viewer will appear on the left.
The chat interface on the right.
When users highlight text, they’ll see a dropdown menu near their selection with contextual actions like Ask or Copy.

Hooks will be used to handle events like text selection and menu placement. Make sure the chat input and dropdown feel responsive by tracking which text is active and when to show menus.

// PdfChat.tsx

"use client";
import LazyAppPdfViewer from "./LazyAppPdfViewer";
import { Chat } from "./Chat";
import { useCallback, useEffect, useState } from "react";
import { SelectDropDown } from "./SelectDropDown";

export const PdfChat = () => {
  const [pdfViewer, setPdfViewer] = useState<HTMLDivElement | null>();
  const [selectedText, setSelectedText] = useState<string>();
  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number }>({
    x: 0,
    y: 0,
  });
  const [showDropdown, setShowDropdown] = useState<boolean>(false);
  const [context, setContext] = useState<string>();

  const handleMouseUp = useCallback(() => {
    const selection = window.getSelection(); // Get current selection
    const selectedString = selection?.toString(); // Convert to string
    const selectedRange = selection?.getRangeAt(0); // Get the range object

    // Set selected text so we can use it later
    setSelectedText(selectedString);

    // If there's valid selection, show dropdown
    if (selectedString && selectedString.trim().length > 0 && selectedRange) {
      const rangeBounds = selectedRange.getBoundingClientRect();
      // Position the dropdown near the selection
      setMenuPosition({
        x: rangeBounds.left + window.scrollX,
        y: rangeBounds.bottom + window.scrollY,
      });
      setShowDropdown(true);
    } else {
      setShowDropdown(false);
    }
  }, []);

  const handleAsk = useCallback(() => {
    setContext(selectedText);
    setShowDropdown(false);
  }, [selectedText]);

  const handleCopy = useCallback(() => {
    if (selectedText) {
      window.navigator.clipboard.writeText(selectedText);
    }
    setShowDropdown(false);
  }, [selectedText]);

  useEffect(() => {
    pdfViewer?.addEventListener("mouseup", handleMouseUp);

    return () => {
      pdfViewer?.removeEventListener("mouseup", handleMouseUp);
    };
  }, [handleMouseUp, pdfViewer]);

  return (
    <>
      <div className="col-span-2 relative">
        <LazyAppPdfViewer ref={setPdfViewer} />
        <SelectDropDown
          position={menuPosition}
          show={showDropdown}
          onAsk={handleAsk}
          onCopy={handleCopy}
        />
      </div>
      <div className="col-span-1">
        <Chat context={context} onClearContext={() => setContext(undefined)} />
      </div>
    </>
  );
};

Part 4 - Create an API to Connect with OpenAI

Now that the UI is complete, we’ll build an API route that connects your app to OpenAI. This backend route will:

Accept questions and optional context (like highlighted text).
Send those to the OpenAI API with an appropriate prompt
Stream the AI’s response back to the frontend in real-time

This gives users a fast, interactive experience where answers appear as they’re generated.

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_KEY,
});

export async function POST(request: Request) {
  const { question, context } = await request.json();
  if (!question) {
    return new Response("No question", { status: 400 });
  }
  try {
    const prompt = context
      ? `
    From this content:
    ${context}
    Question: ${question}
    `
      : question;

    const encoder = new TextEncoder();
    const customReadable = new ReadableStream({
      start(controller) {
        openai.responses
          .stream({
            model: "gpt-4.1-nano",
            input: prompt,
          })
          // send delta to client
          .on("response.output_text.delta", (event) => {
            controller.enqueue(encoder.encode(`data: ${event.delta}\n\n`));
          })
          // send done to client
          .on("response.output_text.done", () => {
            controller.enqueue(encoder.encode("data: [DONE]\n\n"));
            controller.close();
          });

        // Clean up on connection close
        request.signal.addEventListener("abort", () => {
          // clearInterval(intervalId);
          controller.close();
        });
      },
    });

    return new Response(customReadable, {
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
      },
    });
  } catch (error) {
    console.error(error);
    return new Response("Error", { status: 500 });
  }
}

Demo

Here’s what the final app looks like in action:

For the complete example with full codes, check out Stackblitz.

Conclusion

In this tutorial, we've built a simple PDF viewer application with AI chat by using Next.js, OpenAI, and React PDF. By combining modern web technologies, we created a practical tool that enhances document interaction and understanding:

Quickly get summaries, explanations, or answers about any PDF.
Avoid endless scrolling or skimming to find info.
Evaluate answers or insights as needed for reports or messages.

This makes it particularly valuable for professionals who frequently work with PDF documents and need quick insights or clarifications about their content.

With the right React tools and AI, you can unlock new ways to interact with information. If you build something cool or have ideas for new features, share your results with the community!

If you liked this article, take a look at React PDF. It's a React PDF viewer made for React and Next.js projects. No matter if you're new to building apps or handling a larger setup, React PDF is ready to help.

React PDF is built with developers in mind and offers:

Out-of-the-box features - See the Getting Started guide to get moving fast
Plenty of ways to customize - Check out options to style and tweak its components to fit your needs
Simple, clear APIs - Dive into the API documentation to see all the details

Your support helps me keep building new tools and writing for React devs. Thanks for giving React PDF a look! 🙏

🚀 PDF Viewer in PrimeVue using @vue-pdf-viewer 💡

Fang Tanbamrung — Tue, 19 Aug 2025 12:00:00 +0000

PrimeVue gives Vue.js developers flexible UI components for building interactive user interfaces for fast Vue.js development. But when you need to build a PDF Viewer, native PDF rendering requires extra support. @vue-pdf-viewer stands out for its speed and ease of integration.

This guide explains how to use both PrimeVue and @vue-pdf-viewer together to display PDFs right in your Vue app. Set up a powerful vue pdf experience for your users, no matter how big your project grows.

Step 1: Set up a Vue 3 Project

Start by setting up a new Vue 3 project using your preferred package manager (bun, pnpm, npm, yarn). Here’s an example using bun:

Create a new Vite project

bun create vite

Vite will prompt you for a project name and package name.
When Vite asks for a framework, choose Vue.
For the variant, select TypeScript (Vue + TS).

Step 2: Install PrimeVue and Vue PDF Viewer

Install PrimeVue

Install PrimeVue for UI elements:

bun add primevue @primeuix/themes

Install Vue PDF Viewer

Next, install the Vue PDF Viewer package, @vue-pdf-viewer/viewer:

bun add @vue-pdf-viewer/viewer

For more information on how to install Vue PDF Viewer using other package managers, check out the Installation guide.

Step 3: Set up PrimeVue

Configure the main.ts

To set up the default configuration, PrimeVue plugin is required to be installed as an application plugin. It's lightweight and utilized for configuration purposes only.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config' // 👈 here

const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

Verify your setup by adding a component to the the application. In this case, I will add a button and dialog. Each component can be imported and registered individually so that you can include only what you use for bundle optimization.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config'
import Button from 'primevue/button' // 👈 here
import Dialog from 'primevue/dialog' // 👈 here

const app = createApp(App)
app.use(PrimeVue, {
  theme: {
    preset: Aura // 👈 here
  }
})

app.component('Button', Button) // 👈 here
app.component('Dialog', Dialog) // 👈 here
app.mount('#app')

<!-- App.vue -->
<script setup lang="ts">
const visible = ref(false)
</script>

<template>
  <Button label="Show" @click="visible = true" />
  <Dialog v-model:visible="visible" modal header="Dialog title" :style="{ width: '80vw' }">
    dialog content
  </Dialog>
</template>

Step 4: Create a Reusable Vue PDF Viewer Component

Next, let’s build a reusable PdfViewer component using <VPdfViewer> from @vue-pdf-viewer/viewer.

Create a file inside your components directory.

<!-- PdfViewer.vue -->
<script setup lang="ts">
import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer'

const props = defineProps({
  ...VPVBaseProps
})
</script>

<template>
  <div style="width: 1028px; height: 700px; margin: 0 auto">
    <VPdfViewer v-bind="props" />
  </div>
</template>

Here’s what each part does:

VPdfViewer is the core PDF rendering component
VPVBaseProps includes all supported props (like src, page, zoom) so we can pass them in from a parent component.
We define the props using defineProps and spread VPVBaseProps. This makes the component flexible and lets you bind any supported viewer prop without redefining them manually.
We render <VPdfViewer> with v-bind="props". This automatically forwards all props from the parent to the viewer component, so it works like a wrapper you can reuse anywhere.

This setup keeps your PdfViewer.vue clean and flexible. You can now reuse it anywhere with different PDFs, zoom levels, pages, and more.

Use the PdfViewer in App.vue

For this use case, a Vue PDF Viewer component is displayed in a PrimeVue Dialog component.

First, import and register the PrimeVue Dialog component. Next, integrate the PdfViewer component into your Vue app which will be displayed in a dialog:

<!-- App.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import PdfViewer from './components/PdfViewer.vue'
const visible = ref(false)

const pdfSrc =
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
</script>

<template>
  <Button label="Show" @click="visible = true" />
  <Dialog
    v-model:visible="visible"
    modal
    class="my-dialog"
    :style="{ width: '55rem', height: '55rem' }"
  >
    <template #header>
      <p :style="{ textAlign: 'center' }">Preview PDF</p>
    </template>
    <PdfViewer :src="pdfSrc" :initial-scale="1" :style="{ width: '100%', height: '100%' }" />
    <template #footer>
      <Button label="Close" @click="visible = false" />
    </template>
  </Dialog>
</template>

If you open the dialog, Vue PDF Viewer will render the PDF content. However, if you click on the print icon, the print preview will not be displayed correctly. To fix this issue, you can add styles to @media print:

<script setup lang="ts">
import { ref } from 'vue'
import PdfViewer from './components/PdfViewer.vue'
const visible = ref(false)

const pdfSrc =
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
</script>

<template>
  <Button label="Show" @click="visible = true" />
  <Dialog
    v-model:visible="visible"
    modal
    class="my-dialog"
    :style="{ width: '55rem', height: '55rem' }"
  >
    <template #header>
      <p :style="{ textAlign: 'center' }">Preview PDF</p>
    </template>
    <PdfViewer :src="pdfSrc" :initial-scale="1" :style="{ width: '100%', height: '100%' }" />
    <template #footer>
      <Button label="Close" @click="visible = false" />
    </template>
  </Dialog>
</template>

<!-- add style to prevent print pdf that render on dialog -->
<style>
@media print {
  /* Hide the dialog mask */
  .p-dialog-mask {
    display: none !important;
  }
  /* Style the nearest ancestor of the Vue PDF Viewer container */
  .p-dialog-content {
    position: relative; /* Ensure it's not fixed or absolute */
    display: block !important; /* Ensure it's visible */
    overflow: visible; /* Ensure no content is clipped */
  }
}
</style>

Here’s what’s happening:

PdfViewer component is the wrapper we created earlier using VPdfViewer under the hood.
The PdfViewer component is added inside Dialog
We defined a sample pdfSrc string. This is the URL of the PDF you want to display. You can replace it with your own file (local or remote).
We pass :src="pdfSrc" as a prop to <PdfViewer>. This binds the PDF file URL to the viewer component, which will take care of rendering it.

For more information on how @vue-pdf-viewer handles printing, here is the tutorial of Printing via PrimeVue Dialog.

And that’s it, you now have a working PDF viewer inside your Vue app! You can reuse this setup across different pages or wrap it inside a dialog for modal-style viewing if needed.

If you'd like to see the full codes for this example, check out the Stackblitz link for this article.

Looking for a Faster Setup?

If you want to skip boilerplate and get straight to building, check out Vue PDF Viewer Starter Toolkit.

It includes ready-to-use templates for:

Vue: Composition API (JavaScript / TypeScript)
Vue: Options API (JavaScript / TypeScript)
Nuxt (TypeScript)
Vue: SSR (TypeScript)
PrimeVue
Quasar
VitePress
Ionic

Each template comes with a clean folder structure and sample code so you can build a PDF viewer quickly without spending hours configuring dependencies. Just clone, customize, and go. 🚀

Conclusion

Now that you have the files in place and the dependencies correctly installed, you now have a basic Vue PDF application set up that plays well with PrimeVue. You can customize the viewer further by exploring the options and features provided by @vue-pdf-viewer/viewer.

Explore the full list of props and events available in @vue-pdf-viewer/viewer. Pair these features with PrimeVue’s UI components, and you’ll be able to offer a user-friendly, feature-packed document viewer tailored to your users’ needs.

Hope this helped you get started! If you build something with it or run into questions, feel free to drop a comment. I’d love to hear how you’re using Vue PDF Viewer. 🔧📄

✨ Building a PDF Viewer in Nuxt with PDF.js, vue-pdf-embed, vue-pdf and Vue PDF Viewer 🚀

Fang Tanbamrung — Wed, 02 Jul 2025 04:02:15 +0000

It has been a year since my previous article on ✨Building a PDF Viewer for Vue.js with PDF.js, vue3-pdf-app and more 🚀, where I walked through methods like iFrame, opening PDFs in a new tab, using PDF.js or vue3-pdf-app.

Since Nuxt framework is used extensively in the Vue community, I thought it would be interesting to look into how you can build a PDF viewer in Nuxt.

In this article, I will be sharing with you four ways to render PDFs in Nuxt using: PDF.js, vue-pdf-embed, @tato30/vue-pdf, and Vue PDF Viewer. I will also break down the pros and cons of each so you can pick what fits your project best.

How is Nuxt different from Vue.js?

Vue.js is great for building interactive interfaces, but when your app grows, you often end up stitching together routing, server-side rendering (SSR), and deployment setup on your own.

That’s where Nuxt steps in. It’s a framework built on top of Vue.js that adds SSR, static site generation, automatic routing, and performance optimizations out of the box, so you can focus on building your site's features.

Both Vue and Nuxt uses the same core ideas, but Nuxt gives you more structure for large projects. If you want to scale your site or improve SEO, Nuxt saves time and reduces setup headaches.

Vue PDF Viewer: Flexible and Powerful Vue.js PDF Component

Just a quick background of what I’m working on. If you’re building a PDF experience into your Vue or Nuxt app, check out Vue PDF Viewer.

It has over 20 features component that lets users view and interact with PDFs right on your site. With built-in localization, theming, and responsive design, it’s made for teams who care about UX and maintainability.

I’d love your feedback and support, it helps me keep improving the tool and creating helpful content for the Vue community ❤️

Method 1: PDF.js

PDF.js is a powerful JavaScript library from Mozilla that allows rendering and interaction of PDFs directly in web browsers. PDF.js is framework agnostic and can be used in any Javascript framework such as Angular, React and Vue.

In Nuxt, you can use PDF.js by:

Install the PDF.js library via npm.
Create a component to display the PDF viewer.
Incorporate PDF.js into the component to render PDF files.

Here is the link to the code sample.

Pros

Reliable: Developed by Mozilla and supported by the Firefox team.
Active development: Regular updates and maintenance by Mozilla.
Full control over rendering: You can customize rendering (zoom, page navigation, annotation, etc.).
Supports advanced features: Such as rendering page by page, custom UI, highlighting, and more.
Flexible without relying on external UI: You can build your own UI viewer as needed.
Big community: Great for fixing issues and debugging on your own.

Cons

Disorganized documentation: Not user-friendly technical document
More complex to use: Require more code, including handling DOM and canvas
Steep learning curve: Need to understand the inner workings of PDF.js
Not a Vue component: Have to write a wrapper or integration for it to work well in Nuxt

Method 2: vue-pdf-embed

vue-pdf-embed simplifies the process of displaying PDF files in Vue or Nuxt applications. It provides an easy-to-use component to display PDFs without complex setup.

To use vue-pdf-embed in Nuxt, follow these steps:

Install the vue-pdf-embed library via npm.
Import and use the component in your App to display the PDF.
Set the URL or Path of the PDF file you want to display.

Here is the link to the code sample.

Pros

Quick to use: Just import and use <VuePdfEmbed :source="..." /> (no need to render canvas manually).
Ideal for general users or simple tasks: Perfect for simple PDF previews.
Lightweight: Minimal overhead, especially if you don't need a custom UI.

Cons

No SSR support: Does not work in Nuxt’s server-side rendering due to reliance on window and canvas.
Minimal customization/features: Rendering logic and styling options are limited.
Not suitable for complex PDF viewers: Lacks built-in search, zoom, or multi-page navigation.
Lack of documentation: Advanced usage guides and tutorials are not provided.
Smaller community: Support and troubleshooting might require waiting for an issue or PR from other users.

Method 3: @tato30/vue-pdf

@tato30/vue-pdf is a Vue wrapper around Mozilla’s PDF.js that offers a more Vue-friendly way to render PDFs. It supports most core features of PDF.js and makes it easier to integrate into Nuxt applications.

To get started:

Install @tato30/vue-pdf via npm or yarn.
Import the component and register it globally or locally.
Use the component in your template and pass the PDF file URL using the src prop.

Here is the link link for code sample

Pros

Vue/Nuxt support: Fully compatible with Vue and Nuxt using the Composition API.
Simple API: Easy to use and integrate, even for beginners.
PDF rendering flexibility: Supports individual page rendering, text layers, and annotation layers.
Support for non-Latin fonts: With proper setup (e.g. cmaps), it can render PDFs with non-Latin characters.

Cons

No SSR support: Rely on browser-specific APIs like window and canvas, which break in Nuxt SSR mode.
No built-in multi-page rendering: You must manually loop through each page using v-for, which can affect performance.
Lacks built-in UI controls: No default navigation elements (e.g. next/previous buttons, zoom controls, scrollbars). You must implement these controls yourself.
Extra setup for some features: Enabling text layer, annotations, or non-Latin font rendering requires additional configuration.
Smaller community: Issue resolution may be slower, with fewer active contributors.

Method 4: Vue PDF Viewer

The Vue PDF Viewer library offers a comprehensive PDF viewer component for Vue or Nuxt applications. Built on top of Mozilla’s PDF.js engine, it provides a full-featured UI experience that closely resembles popular desktop PDF viewers.

To add Vue PDF Viewer to your Nuxt app:

Install @vue-pdf-viewer/viewer and its peer dependency pdfjs-dist via npm or yarn.
Import and register the component in your Nuxt app.
Use the component in your template and set the PDF file URL or path via the src prop.

Here is the link link for code sample

Pros

Quick and easy setup: Install and render a fully working PDF viewer in just a few lines. Or use a ready-to-use setup from sample projects.
Built-in toolbar: Comes with a fully functional toolbar with essential functions like page navigation, zoom, thumbnails, sidebar, text search and etc.
Feature-rich PDF Viewer: Over 20+ standard features out-of-the-box, such as search, theme, print, download, rotate and etc.
Highly customizable: Customize your Nuxt PDF Viewer to your own brand or build your own toolbar with Exposed APIs for search, highlight, print, rotate functions and more.
Clear documentation: Well-written guides, tutorials, and examples help speed development.
Actively maintained: Frequent updates, prompt bug fixes, and responsive support.

Cons

Paid: Although you can try it free with watermark or through a free trial, a paid license is required to use in your Nuxt apps. Though, personally, the pricing plans are reasonable.
No SSR (Server-Side Rendering) support: Depends on browser-specific APIs and cannot be rendered on the server (e.g. in Nuxt or other SSR setups).
Larger bundle size: It includes full viewer UI components and assets, which is heavier as compared to smaller PDF viewer alternatives.

Conclusion

There’s no one-size-fits-all solution when it comes to rendering PDFs in a Nuxt application. Depending on your project’s needs, technical complexity, and user experience goals, each method covered brings something different to the table:

Use PDF.js when you want absolute control and don’t mind investing in custom UI and handling complexity.
Choose vue‑pdf‑embed if you simply need a lightweight and easy-to-use viewer.
Go with @tato30/vue‑pdf for a balanced option between functionality and simplicity.
Try Vue PDF Viewer @vue‑pdf‑viewer/viewer if your app requires a feature-rich solution built specifically for Vue or Nuxt, perfect for production-grade apps that need advanced functionality like search, theming, localization, and more.

Thanks again for reading! I hope this guide gave you a clearer picture of what fits your Nuxt project best. Feel free to leave your thoughts or questions in the comments, I’d love to hear what you’re building! 🙏

🔥How to Render a Beautiful PDF Viewer for Vue.js in Minutes💅

Fang Tanbamrung — Wed, 25 Sep 2024 12:00:00 +0000

Since my last post on building PDF Viewer with Vue.js, I have been hard at work to develop a library that just works: Vue PDF Viewer.

✨Building a PDF Viewer for Vue.js with PDF.js, vue3-pdf-app and more 🚀

Fang Tanbamrung for Vue PDF Viewer ・ Mar 19 '24

#vue #frontend #javascript #webdev

After being in private beta for a few months, we officially launched Vue PDF Viewer earlier this month. In this article, I'll be sharing with you how to render a PDF in Vue.js in just minutes, along with a few use cases to help you make the most out of this library.

Why Vue PDF Viewer?

Let’s start with why Vue PDF Viewer stands out. Here’s a quick rundown of its key features:

Built for Vue: Designed specifically for Vue.js developers, Vue PDF Viewer is designed using familiar Vue’s component-based structure, syntax and state management for Vue.js developers to customize natively.
Quick Setup: Go from zero to a fully functional PDF viewer in just 3 simple steps.
Customizable: Supports themes, responsive layouts, and custom icons, allowing you to tailor the viewer to fit your app’s design.
High Performance: Optimized for handling multiple PDFs without sacrificing speed or performance.

Now, let’s dive into the step-by-step process to get started with Vue PDF Viewer.

Displaying a PDF Viewer Component

Vue PDF Viewer supports Vue 3. It also works seamlessly across a wide range of environments, including:

Vue 3 – Composition API (TypeScript, JavaScript)
Vue 3 – Options API (TypeScript, JavaScript)
Vue 3 – Server-Side rendering (TypeScript)
Nuxt
VitePress
Quasar

For this demo, I’ll show you how to add the Vue PDF Viewer component to a Vue app.

Step 1: Adding the Library

To get started, add the Vue PDF Viewer library to your project. It’s a quick and easy installation.

bun add @vue-pdf-viewer/viewer

Remark: You can use yarn, npm or pnpm.

Step 2: Importing the Component

Next, we’ll import the PDF viewer component into your Vue application.

<script setup>
  import { VPdfViewer } from "@vue-pdf-viewer/viewer";
</script>

Step 3: Render the Component

Finally, render the component and pass in the required props to display your PDF document.

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
    />
  </div>
</template>

That’s it! In just a few steps, you have integrated a fully responsive and customizable PDF viewer into your Vue app!

Remark: Since the Vue PDF Viewer is a component, you can initiate multiple instances of the component in the same page independently.

Common Use Cases

Want to know more about how you can modify Vue PDF Viewer to fit your needs? Here are some common use cases:

Change Themes to Match Your Site

You can easily adjust the viewer’s theme to match your website’s design. Whether your site uses light or dark modes or other types of color scheme, VPV can be customized to fit the current settings, ensuring a consistent look and feel across your entire platform.

<script setup>
  ...
</script>
<style scoped>
:deep(.vpv-variables) {
  --vpv-container-border-color: lightblue;
  --vpv-toolbar-background-color: mintcream;
  --vpv-toolbar-color: black;
  --vpv-toolbar-border-color: lightblue;
  --vpv-icon-active-background: grey;
  --vpv-sidebar-content-background-color: mintcream;
  --vpv-sidebar-content_thumbnail-page-number-font-size: 10px;
  --vpv-sidebar-content_thumbnail-focused-border-color: darkslategrey;
  --vpv-pages-container-background: mintcream;
}

/* To override variables in dark mode */
:deep(.vpv-variables.vpv-variables__dark) {
  --vpv-container-border-color: blue;
  --vpv-toolbar-background-color: darkgrey;
  --vpv-toolbar-color: white;
  --vpv-toolbar-border-color: blue;
  --vpv-icon-active-background: grey;
  --vpv-sidebar-content-background-color: darkgrey;
  --vpv-sidebar-content_thumbnail-focused-border-color: white;
  --vpv-pages-container-background: darkgrey;
}
</style>

Adjust Web Responsive Breakpoint

By default, the Vue PDF Viewer component resizes responsively at 768px. If you wish to adjust the breakpoint to be higher, perhaps because you using text instead of graphic as icons, you can easily specify breakpoint to trigger responsive style.

<style scoped>
  :deep(.vpv-variables) {
    --vpv-container-width-sm: 1000px;
  }
</style>

Or if you need the PDF viewer component to resize even below the default breakpoint.

<style scoped>
  :deep(.vpv-variables) {
    --vpv-container-width-sm: 600px;
  }
</style>

Customize Any Icon

Vue PDF Viewer provides flexibility when it comes to customizing the user interface. You can easily swap out default icons with custom ones, giving you the ability to maintain brand consistency or match your app’s style.

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template #iconSearch>
        <span>Search</span>
      </template>
    </VPdfViewer>
  </div>
</template>

If you are interested in learning more about the library, feel free to check out the docs or try out our demo.

Conclusion

In just a few steps, you can have a fully functioning, responsive, and customizable PDF viewer embedded into your Vue.js application using Vue PDF Viewer. Whether you are building a simple document viewer or a more complex app, Vue PDF Viewer makes PDF rendering effortless and beautiful.

Thank you for taking the time to read this post. And I look forward to seeing what you build with Vue PDF Viewer! 🙏

✨Building a PDF Viewer for Vue.js with PDF.js, vue3-pdf-app and more 🚀

Fang Tanbamrung — Tue, 19 Mar 2024 12:30:00 +0000

As someone who has worked on several Vue.js projects in the past, I know firsthand the importance of having a great PDF Viewer to enhance the user experience. Whether it's displaying important documents, presenting reports, or sharing content, PDF viewers provide a seamless way to access and interact with PDF files.

In this article, I'll be sharing with you four different methods that I've personally used for building a PDF Viewer in Vue.js: iFrame, PDF with New Tab, PDF.js, and vue3-pdf-app. Each method offers unique features and benefits, catering to various project requirements.

What is so important about PDF?

Rendering PDFs on websites has a wide range of practical use cases that some of you may have come across. Here are a few examples of these use cases:

Product Manuals: As a senior developer, you know that product manuals are an essential resource for customers. By rendering product manuals as PDFs, users can access them on any device, view them in high resolution, and even print them out if needed. PDFs allow you to preserve the original layout and formatting while adding interactive elements like hyperlinks and bookmarks to make navigation easy.
Legal Contracts: Contracts are an important legal document that requires accuracy and consistency. By rendering legal contracts as PDFs, you can ensure that they cannot be edited or tampered with, and that they can be quickly and easily signed online with digital signatures.
E-books and Online Publications: Many websites offer e-books, case studies, and other online publications. By rendering this content as PDFs, readers can enjoy a familiar reading experience, similar to reading a physical book or magazine, with the ability to zoom in, annotate, and bookmark pages.
Educational Materials: As a developer, you may find yourself working on e-learning websites or educational platforms. By rendering course materials and study guides as PDFs, you can present the content in an easy-to-read, visually appealing way.

Vue PDF Viewer: Flexible and Powerful Vue.js PDF Component

Just a quick background about what I’m working on. Vue PDF Viewer renders the PDF viewer on your Vue or Nuxt websites so that your users can interact with your PDF document without leaving your sites. The component has over 20 features including theme customization, built-in localization, web responsive and more.

I would be grateful if you could check Vue PDF Viewer out. It will encourage me to make even more contents ❤️‍🔥

Method 1: iFrame

iFrame provides a straightforward approach to embed PDF files and leverage the browser's built-in PDF viewing capabilities.
Here's how you can implement it in Vue.js:

Install Vue.js and create a new Vue project using the Vite.
Add an iFrame element to your Vue component template.
Set the src attribute of the iFrame to the URL or path of the PDF file.

Here is the link to the code sample.

Using iFrame has its pros and cons:

Pros

Simple implementation
Relies on the browser's native PDF viewer
Display PDF file as part of a website

Cons

Cannot customize because it's using the browser's native pdf function
Potential compatibility issues with different browsers and versions

When to use
Looking for a quick set up without a need for PDF viewer to have UI consistency.

Method 2: PDF with New Tab

The second method involves opening the PDF in a new browser tab. Here's an overview of implementing this method in Vue.js:

Create a link or button element in your Vue component template.
Add an onclick event handler to open a new browser tab with the PDF URL.

Using a new tab approach offers the following pros and cons:

Pros

Simple implementation
Direct interaction with the PDF content

Cons

User experience cannot be controlled
Potential compatibility issues with different browsers and versions

When to use
Similar to method 1 and when you want the viewing experience of PDF file to be separated from the main website. For example, you do not want to add a PDF iFrame.

Method 3: PDF.js

PDF.js is a powerful JavaScript library maintained by Mozilla that allows rendering and manipulation of PDF files directly in web browsers. It provides extensive features and capabilities for displaying PDFs in Vue.js applications. To utilize PDF.js in Vue.js, follow these steps:

Install the PDF.js library using a script tag.
Create a Vue component to display the PDF viewer
incorporate the PDF.js into the component to render PDF files.

I have added a simple PDF Viewer using PDF.js in a Vue website. You may find the codes here.

Let's discuss the advantages and disadvantages of using PDF.js:

Pros

Advanced PDF rendering functionality
Cross-browser compatibility
Extensive customization options
Well maintained
Big community

Cons

May require time and effort to learn the syntax and best practices of the library
Not user-friendly technical document
Not easy to customize with JavaScript such as Angular, React and Vue
Increased complexity when handling more complex PDF interactions

When to use
If you want to customize the PDF viewer UI and integrate it as part of a Vue website.

Method 4: vue3-pdf-app

vue-pdf is a convenient package specifically designed for Vue.js developers to build PDF viewers. It acts as a wrapper around PDF.js, simplifying the integration process. Here's how you can get started with vue3-pdf-app in Vue.js:

Install the vue3-pdf-app package using npm or yarn
Import the vue3-pdf-app component to display PDF

Please find the demo here.

Let's explore the advantages and disadvantages of using vue-pdf:

Pros

Easy integration with Vue.js projects
Simplified API for PDF rendering
Customizable viewer options

Cons

Support only Vue 3.2 with vue-cli which is not no longer recommended by Vue
Cannot run on Vite
Not maintained
Small community

When to use
Actually, I don't recommend using this library because of it only support Vue 3.2.

Comparison Summary

There are multiple methods available to build a PDF viewer for Vue.js. The iFrame approach is simple and relies on the browser's built-in capabilities. Displaying PDFs on the browser provides more control but requires user installation of a PDF viewer plugin. PDF.js offers advanced rendering features and cross-browser compatibility. For Vue.js developers, the vue-pdf package provides a convenient wrapper for PDF.js, simplifying the implementation process. Choose the method that best suits your project requirements and delivers the desired user experience

Is there a Better Solution?

For customization purposes, using iFrame or Open with New Tab may not be suitable. Although PDF.js is a possible option, using it effectively can take time and effort that Vue.js developers may not want to commit. It's because of all these reasons that the company I'm working for is building a new library, Vue PDF Viewer.

Made for Vue.js: Vue PDF Viewer library is crafted to seamlessly integrate with Vue.js. With just a few lines of code. What's more, the library offers extensive customization options, enabling developers to easily match the PDF viewer's theme to their website's design.
Compatible with Vite: For Vue.js developers who leverage Vite as their development tool, the library brings additional advantages. Developers can take advantage of unmatched performance and build speed.
Extensive Feature Set: Come equipped with an extensive set of over 20 features, catering to a wide range of user requirements. From essential functionalities like text highlighting and bookmarking, to advanced options such as search functionality, web responsive and localization.
User-Friendly Technical Doc: Get started quickly with our starter toolkit. The documentation includes clear instructions, code examples, and extensive API references.
Reliable Support: We understand the importance of reliable support during the integration process. From a responsive customer support team to regular updates addressing bug fixes and feature enhancements.

If you find this library helpful, please check out please check out Vue PDF Viewer. It would encourage me to continue creating even more contents. Thank you in advance! 🙏

How to create React Forms without libraries ✨

Fang Tanbamrung — Wed, 14 Feb 2024 06:00:00 +0000

In web development, forms play a pivotal role. They serve as the interface for users to interact with your app or website. I have created a lot of React forms (way too many 🤣) with or without a UI library. Personally, for anything new, you should try to code or do a proof of concept without supporting libraries to understand how things work at the fundamental level. Initially, it may take a bit longer, but you will understand how things work better. Then, you can adapt to future requirements or challenges that may come your way.

In this article, I will share the key concepts with examples on how to create a proper React form. To create a form, you will need to consider the following points

What is a form?
Controlled vs Uncontrolled Inputs
Building and Managing Form Input Fields
Handling Form Submissions

📄 Heads-Up: Smooth PDF Viewing in React

Before we dive into the top UI libraries, here’s something worth bookmarking: If you’re building a React app that needs to display PDF documents reliably, React PDF might save you a lot of time.

It uses pure React components to render PDFs. No iframes, no third-party viewer wrappers, just fast, smooth rendering inside your UI. Whether you’re building a dashboard, internal tooling, or a document-heavy app, it’s designed to slot right into your workflow.

👉 Try out React PDF now and see how easy it is to bring professional-grade PDF viewing to your React app.

What is a form?

Imagine you're filling out a physical form at a doctor's office. It contains fields like your name, address, and reason for the visit. A form is like a digital version of that physical form, but on a website or an app. It allows users to interact with a website by letting you input information, like your email or a message, and then submit it. The submitted information can be used to perform various actions.

For example, think of a contact form on a website. You can enter your name, email, and a message, and when you click "Submit," the website receives your information. This allows the website owner to respond to your message and get in touch with you.

Forms can be used for many different purposes, like signing up for a newsletter, leaving feedback, or placing an order online. The websites and apps use forms to interact with us and provide relevant services.

Uncontrolled vs Controlled Inputs

In React, form input fields can be divided into two categories: controlled and uncontrolled inputs. The main difference between them lies in how their values are managed and updated.

Uncontrolled Inputs

Uncontrolled inputs do not have direct data binding, and their current values are not managed by React. Instead, their values are only fetched or synced when needed, such as during the form submission or a specific event. This gives React less control over the input's value, and it relies on using ref or other methods to manually obtain the input value.

Example:

import { useCallback, useRef } from "react";

export const Uncontrolled = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = useCallback(() => {
    console.log(`Password: ${inputRef.current?.value}`);
  }, []);
  return (
    <>
      <div>
        <label htmlFor="password">Password: </label>
        <input type="password" id="password" ref={inputRef} />
        <button onClick={handleClick}>Submit</button>
      </div>
    </>
  );
};

In the example above, the input field is uncontrolled as it does not bind value with React state. Instead, it relies on the ref attribute to create a reference to the input. When the user clicks the submit button, the handleClick method accesses the input's value using the ref that bind to input to log the password.

Controlled Inputs

Controlled inputs allow React to control their current values through binding with a value property and subscribe it value's change with onChange event or onInput event

As a user interacts with the form, React keeps track of the input's state and updates the data accordingly.

Example:

import { ChangeEvent, useCallback, useState } from "react";

export const Controlled = () => {
  const [password, setPassword] = useState<string>("");

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  }, []);

  const handleSubmit = useCallback(() => {
    console.log("Password:", password);
  }, [password]);

  return (
    <>
      <div>
        <label htmlFor="password">Password: </label>
        <input
          type="password"
          onChange={handleChange}
          value={password}
          id="password"
        />
        <button onClick={handleSubmit}>Submit</button>
      </div>
    </>
  );
};

In the example above, the input field is controlled as its value is bound to the password value property. When the user types or updates the input, the password property value also updates accordingly.

Building and Managing Form Input Fields:

As you may know, there are many input types. In the interest of time, we will cover the more common ones.

Types of Input Fields

Input

This is one of the most common form elements. Let's create a text input field as an example.

import { ChangeEvent, useCallback, useState } from "react";

export const Input = () => {
  const [value, setValue] = useState<string>("");

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  }, []);

  return (
    <>
      <div>
        <label htmlFor="name">Name: </label>
        <input type="text" id="name" value={value} onChange={handleChange} />
      </div>
      <div>value: {value}</div>
    </>
  );
};

Checkbox

Checkboxes allow users to select one or more options from a set.

import { useCallback, useState } from "react";

export const Checkbox = () => {
  const [value, setValue] = useState(false);

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.checked);
  }, []);

  return (
    <>
      <div className="checkbox">
        <label htmlFor="checkbox"> Accept Terms: </label>
        <input
          type="checkbox"
          id="checkbox"
          checked={value}
          onChange={handleChange}
        />
      </div>
      <div>value: {JSON.stringify(value)}</div>
    </>
  );
};

In the above code, we bind the Accept Terms value to a checkbox input. When the checkbox is clicked, the Accept Terms value will automatically update to reflect the status of the checkbox.

Select

Like Checkboxes Select allow users to select option from a set but in other UI

import { ChangeEvent, useCallback, useState } from "react";

export const Select = () => {
  const [value, setValue] = useState<string>("");

  const handleSelect = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
    setValue(event.target.value);
  }, []);

  return (
    <>
      <div>
        <label htmlFor="select">Select: </label>
        <select id="select" value={value} onChange={handleSelect}>
          <option disabled value="">
            Please choose one
          </option>
          <option value="volvo"> Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </div>
      <div>selected: {value}</div>
    </>
  );
};

In the above code, we bind value of select element when user select option the change event will trigger and set React state

File

HTML doesn't support setting value to file inputs as this could pose a security risk. However, we can still capture the user-selected file(s) via event handling.

import { ChangeEvent, useCallback, useState } from "react";

export const FileInput = () => {
  const [_value, setValue] = useState<File>();

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    const fileList = event.target.files;
    const newFile = fileList?.[0] ?? undefined;
    setValue(newFile);
    console.log(newFile);
  }, []);

  return (
    <>
      <div>
        <label htmlFor="file">Choose File:</label>
        <input type="file" id="file" onChange={handleChange} />
      </div>
    </>
  );
};

In the example above, we listen to the input field’s change event. When a user selects a file, the handleChange function is called, where we can then process the selected file accordingly.

Handling Form Submissions

Handling form submissions in a React application typically involves capturing user input, validating the data, and handling the submitted data by performing an action, like making a request to an API, or updating the application's state. We will describe the steps and best practices for handling form submissions in a React.js application.

Steps for Handling Form Submissions in React

Capture user input with value property and onChange event: The first step in handling form submissions is capturing user input using element prop value to force element to show what value it should be and onChange event to track what is user input to change current React state to show on element.
Prevent default form submission behavior with "preventDefault function in submit event": By default, when a form is submitted, the page will refresh and the form data will be sent to the server. In React, we want to handle the form submission in client side by prevent default event when user submit <form> element.
Create a method to handle form submission: Now that we have captured user input and prevented the default form submission behavior, we need to create a React method that will manage the form submission and perform necessary actions (e.g. validate user input, sending data to an API, updating the application state).
Call the method to submit form: We will call the method to validate the form, make a call to the backend API and update local state.

Example: Handling Form Submissions

import { ChangeEvent, useCallback, useState, useMemo } from "react";

function useInputValue() {
  const [value, setValue] = useState<string>("");
  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  }, []);
  return [value, handleChange];
}

export const Login = () => {
  const [username, handleChangeUsername] = useInputValue();
  const [password, handleChangePassword] = useInputValue();
  const [remember, setRemember] = useState<boolean>(false);
  const handleChangeRemember = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setRemember(event.target.checked);
    },
    []
  );

  const result = useMemo(() => {
    return JSON.stringify(
      {
        username,
        password,
        remember,
      },
      null,
      2
    );
  }, [username, password, remember]);

  const handleSubmit = useCallback<FormEventHandler>(
    (event) => {
      event.preventDefault();
      console.log(result);
    },
    [result]
  );

  return (
    <>
      <div className="form">
        <h2>Login</h2>
        <div>
          <form onSubmit={handleSubmit}>
            <div>
              <label htmlFor="username">Username</label>
            </div>
            <div>
              <input
                id="username"
                value={username}
                onChange={handleChangeUsername}
              />
            </div>
            <div>
              <label htmlFor="password">Password</label>
            </div>
            <div>
              <input
                id="password"
                value={password}
                onChange={handleChangePassword}
              />
            </div>
            <div className="checkbox">
              <input
                type="checkbox"
                checked={remember}
                onChange={handleChangeRemember}
              />
              Remember me
            </div>
            <button className="submit" type="submit">
              Submit
            </button>
          </form>
        </div>
      </div>
      <div>{result}</div>
    </>
  );
};

For live demo and codes, please click on see demo.

What about form validation?

I intentionally not include form validation because I think it deserves a place of its own. Form validation is crucial to maintaining the integrity of your data and improving the user experience. I plan to explain how form validation works and different ways to validate forms in the next article.

Conclusion

By adhering to the concepts, methods, and tips provided in this guide, you can efficiently work with forms in React without the need for any external libraries. We encourage you to experiment further and keep enhancing your knowledge in React form development.

Once you are comfortable with the fundamental, it's perfectly normal to use a form library for your work. Although there are some learning curves, you can write cleaner codes and develop forms faster so you can focus on tackling more difficult tasks. If you are planning to use a form library, you may want to consider factors like feature limitations and maintainability. Here is an article by my colleague, 🔥 5 Best Libraries to Develop React.js Forms 2024 to get you started.

📘 Bonus Tool: Add PDF Support in Minutes

Looking to enhance your React project with reliable document viewing? React PDF gives you the tools to integrate smooth, fully native PDF rendering without reinventing the wheel. It’s developer-friendly, framework-consistent, and built for modern React apps.

🛠️ Start building with React PDF → Explore the docs

🤔 3 Major Problems of Reusable Components in Vue.js 🔥

Fang Tanbamrung — Wed, 06 Sep 2023 12:45:20 +0000

When we talk or discuss about creating UI components in Vue.js, reusability is often brought up. Yes, one of the key principles of Vue.js is its component-based architecture, which promotes reusability and modularity. But what does that even mean?

Let's say you create a reusable component:

Can you or your colleagues really reuse (no pun intended) it in another part of the system?
With a new requirement, you may have to consider modifying the "reusable component".
What if you need to split the "reusable component" to so that you can apply the split component to another place?

Creating actually reusable components in Vue.js can be tricky. In this article, I will explore the concept of reusable components, the problems faced when applying them, and why it is essential to overcome these problems as best as I can.

Vue-PDF-Viewer: Flexible and Powerful Vue.js PDF Component

Just a quick background about what I’m working on. Vue-PDF-Viewer renders the PDF viewer on your Vue or Nuxt websites so that your users can interact with your PDF document without leaving your sites. The component has over 20 features including theme customization, built-in localization, web responsive and more.

I would be grateful if you could check Vue-PDF-Viewer out. It will encourage me to make even more contents 🎉

What are Reusable Components?

Reusable components are UI building blocks that can be used in different parts of an application or even across multiple projects. They encapsulate specific functionality or UI patterns and can be easily integrated into other parts of the application without the need for extensive modifications.

Benefits of Reusable Components

By using Reusable Components in Vue.js, you can achieve several benefits like:

Efficiency: Allow developers to write code once and reuse it multiple times. This reduces redundancy and saves valuable development time.
Standardization: Promote consistency and standardization across a Vue.js project. They ensure that the same design patterns, styles, and functionality are maintained throughout the application.
Scalability: Make it easier to scale and adapt projects as they grow. By breaking down the application into smaller, reusable components, it becomes more manageable to handle complex functionalities and add new features.
Collaboration: Facilitate collaboration among team members working on a Vue.js project. They provide a shared vocabulary and set of UI elements that everyone in the team can use and understand.

3 Problems when Applying Reusable Concept

While reusability is a desirable trait in Vue.js components, several problems can make it difficult to achieve:

Modifying Existing Components: One problem is modifying existing components that are already being used in the application. The component may need to be changed to support both existing and new requirements. Making changes to a component that is already used in other parts of the application may introduce unintended side effects and break functionality in other areas. Balancing the need for changes with maintaining compatibility can be complex.
Design Components for Consistency and Flexibility: Another problem is maintaining consistency across different instances of a reusable component while allowing for customization and flexibility. Reusable components should be versatile enough to adapt to different design requirements and styles. However, providing customization options without sacrificing the core functionality and consistency of the component can be tricky.
Managing Component Dependencies and State: Using reusable components involves managing dependencies and ensuring that each component remains self-contained and independent. Components should not have tight dependencies on external resources or the application's state management system. This allows for easy integration into different projects and reduces the likelihood of conflicts or unintended side effects.

A Case Study

Let's say, a client wants an internal employee directory system. The project is engaged based on Agile methodology and all requirements cannot be gathered before development. There are 3 phases (Prototype, Phase 1 and Phase 2). For the purpose of this demonstration, I will focus on a card component like below:

Prototype

As part of the prototype phase, I am required to deliver a User Profile page. The user profile will contain a basic user card component to include user avatar and name.

// Prototype.vue
<script setup lang="ts">
    import { defineProps, computed, Teleport, ref } from "vue";

    interface Props {
        firstName: string;
        lastName: string;
        image?: string;
    }

    const props = defineProps<Props>();
</script>

<template>
    <div class="app-card">
        <img
            class="user-image"
            :src="image"
            alt="avatar" />
        <div>
            <div>
                <label> {{ firstName }} {{ lastName }} </label>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .app-card {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: white;
        box-shadow: 0 0 5px;
        border-radius: 5px;
        border: none;
        font-size: 1.5em;
        transition: 0.3s;
        display: flex;
        align-items: center;
    }
    .app-card label {
        font-weight: 600;
    }
    .app-card:hover {
        background: rgba(128, 128, 128, 0.5);
    }
    .user-image {
        width: 100px;
    }
</style>

Phase 1

In Phase 1, the client wants to add user detail (birthday, age, phone number and email) onto the user card component.

//Phase1.vue
<script setup lang="ts">
    import { defineProps, computed } from "vue";

    interface Props {
        firstName: string;
        lastName: string;
        image?: string;
        birthDay?: string;
        phone?: string;
        email?: string;
    }

    const props = defineProps<Props>();

    const age = computed(() => {
        if (!props.birthDay) {
            return "0";
        }
        const birthYear = new Date(props.birthDay).getFullYear();
        const currentYear = new Date().getFullYear();
        return currentYear - birthYear;
    });
</script>

<template>
    <div
        ref="cardRef"
        class="app-card">
        <img
            class="user-image"
            :src="image"
            alt="avatar" />
        <div>
            <div>
                <label> {{ firstName }} {{ lastName }} </label>
            </div>
            <div>
                <div>
                    <label> Birth day: </label>
                    <span>
                        {{ birthDay }}
                    </span>
                </div>
                <div>
                    <label> Age: </label>
                    <span>
                        {{ age }}
                    </span>
                </div>
                <div>
                    <label> Phone number: </label>
                    <span>
                        {{ phone }}
                    </span>
                </div>
                <div>
                    <label> Email: </label>
                    <span>
                        {{ email }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .app-card {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: white;
        box-shadow: 0 0 5px;
        border-radius: 5px;
        border: none;
        font-size: 1.5em;
        transition: 0.3s;
        display: flex;
        align-items: center;
    }
    .app-card label {
        font-weight: 600;
    }
    .app-card:hover {
        background: rgba(128, 128, 128, 0.5);
        color: black;
    }
    .user-image {
        width: 100px;
    }
</style>

Additionally, the client is looking to add Employee Directory page and display user profiles in a card format.

// SearchPage
<template>
    <div>
        <SearchInput v-model:value="searchValue" />
        <template
            :key="item.id"
            v-for="item of list">
            <div style="margin-bottom: 5px; margin-top: 5px">
                <UserCard v-bind="item" />
            </div>
        </template>
    </div>
</template>

<script lang="ts">
    import SearchInput from "../components/SearchInput.vue";
    import UserCard from "../components/Phase1.vue";
    import { ref, watch } from "vue";

    export default {
        name: "Search",
        components: {
            SearchInput,
            UserCard,
        },
        setup() {
            const searchValue = ref<string>();
            const list = ref();
            fetch("https://dummyjson.com/users")
                .then((res) => res.json())
                .then((res) => (list.value = res.users));

            watch(searchValue, (v) => {
                fetch(`https://dummyjson.com/users/search?q=${v}`)
                    .then((res) => res.json())
                    .then((res) => (list.value = res.users));
            });

            watch(list, (v) => console.log(v));

            return {
                searchValue,
                list,
            };
        },
    };
</script>

At this stage, the user card component is reusable on both pages.

Phase 2

Users feedback that the Employee Directory page is cluttered. Too much information making the page hard to use. Therefore, the client wants the user detail to be shown in tooltip upon hovered. The requirement on the User Setting page remains unchanged.

// Phase 2
<script setup lang="ts">
import {
  defineProps,
  computed,
  Teleport,
  ref,
  onMounted,
  onBeforeUnmount,
} from "vue";

interface Props {
  firstName: string;
  lastName: string;
  image?: string;
  birthDate?: string;
  phone?: string;
  email?: string;
  address?: string;
}

const props = defineProps<Props>();

const targetRef = ref<HTMLDiveElement>();
const isMouseOver = ref(false);
const dropdownRef = ref<HTMLDivElement>();
const dropdownStyle = ref({});

// add modal element in body to prevent overflow issue
const modalElement = document.createElement("div");
modalElement.id = "modal";
document.body.appendChild(modalElement);

const age = computed(() => {
  if (!props.birthDate) {
    return "0";
  }
  const birthYear = new Date(props.birthDate).getFullYear();
  const currentYear = new Date().getFullYear();
  return currentYear - birthYear;
});

const onMouseOver = () => {
  if (isMouseOver.value) {
    return;
  }
  isMouseOver.value = true;
  const dimension = targetRef.value.getBoundingClientRect();
  dropdownStyle.value = {
    width: `${dimension.width}px`,
    left: `${dimension.x}px`,
    top: `${window.scrollY + dimension.y + dimension.height + 5}px`,
  };
};

const onMouseLeave = () => {
  isMouseOver.value = false;
};
</script>

<template>
  <div
    ref="targetRef"
    @mouseover="onMouseOver"
    @mouseleave="onMouseLeave"
    class="app-card"
  >
    <img class="user-image" :src="image" alt="avatar" />
    <div>
      <div>
        <label> {{ firstName }} {{ lastName }} </label>
      </div>
    </div>
  </div>
  <Teleport to="#modal">
    <div
      ref="dropdownRef"
      :style="dropdownStyle"
      style="position: absolute"
      v-show="isMouseOver"
    >
      <div class="app-card">
        <div>
          <div>
            <label> Birth day: </label>
            <span>
              {{ birthDate }}
            </span>
          </div>
          <div>
            <label> Age: </label>
            <span>
              {{ age }}
            </span>
          </div>
          <div>
            <label> Phone number: </label>
            <span>
              {{ phone }}
            </span>
          </div>
          <div>
            <label> Email: </label>
            <span>
              {{ email }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.app-card {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background: white;
  box-shadow: 0 0 5px;
  border-radius: 5px;
  border: none;
  font-size: 1.5em;
  transition: 0.3s;
  display: flex;
  align-items: center;
}
.app-card label {
  font-weight: 600;
}
.app-card:hover {
  background: rgba(128, 128, 128, 0.5);
  color: black;
}
.user-image {
  width: 100px;
}
</style>

To look at the codes of Prototype, Phase 1 and Phase 2, you can find them in live demo.

This new requirement causes a headache:

Do I modify the existing user card component to support the tooltip requirement and risk affecting the user card component in the User Setting page? OR
Do I duplicate the existing user card component and add tooltip feature?

Because we do not want to break what is already in production, we tend to choose the latter option. At first, this may make sense but it can be quite damaging, especially for big and continuous projects:

Large Codebase: Leads to a larger codebase, as each duplicated component adds unnecessary lines of code. Become difficult to maintain, as developers need to make changes in multiple places whenever an update or bug fix is required. It also increases the chances of inconsistencies.
Short Term Gain, Long Term Pain: Seem like a quick and easy solution in the short term, especially when dealing with tight deadlines or urgent requirements. However, as your project grows, maintaining duplicated components becomes increasingly difficult and time-consuming. Modifications or updates to duplicated components need to be replicated across multiple instances, leading to a higher chance of errors.
System Performance: Can negatively impact system performance. Redundant code increases the size of the application, leading to slower rendering times and increased memory usage. This can result in a suboptimal user experience and reduced system efficiency.

How to Overcome the Above Problems

It's to be mentally prepared that the reusable components may not always remain the same throughout your project. It may sound cliche but if you think about it, requirements are always evolving. You cannot control the future except do the best you can at the moment. Of course, experiences help you designing better components but it takes time.

Refactor Reusable Components

From my experience, I will redesign and refactor the reusable components. Refactoring is a process to restructure codes, while not changing its original functionality. I'm sure there are many ways to refactor and, for me, I refactor and breakdown the components into smaller components. Smaller components allow for flexibility in applying them across the system. Let's take a look how I will apply the case study mentioned above.

Note: It takes discipline to refactoring UI components. Also, it can be challenging at times since you will need to balance with project delivery deadlines and cleaner codes.

Apply Solution to the Case Study

First, I will split the existing user card components into 4 components:

Card component
Avatar component
Name component
User detail component

// Card.vue
<template>
    <div class="app-card">
        <slot></slot>
    </div>
</template>

<style scoped>
    .app-card {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 5px;
        border: none;
        background: white;
        color: black;
        font-size: 1.5em;
        transition: 0.3s;
        display: flex;
        align-items: center;
        box-shadow: 0 0 5px;
    }
    .app-card:hover {
        background: rgba(128, 128, 128, 0.5);
        color: black;
    }
</style>

// Avatar.vue
<script setup lang="ts">
    import { defineProps } from "vue";

    interface Props {
        image: string;
    }

    const props = defineProps<Props>();
</script>

<template>
    <img
        class="user-image"
        :src="image"
        alt="avatar" />
</template>

<style scoped>
    .user-image {
        width: 100px;
    }
</style>

// UserName.vue
<script setup lang="ts">
    import { defineProps } from "vue";

    interface Props {
        firstName: string;
        lastName: string;
    }

    const props = defineProps<Props>();
</script>

<template>
    <label> {{ firstName }} {{ lastName }} </label>
</template>

// Description Item
<script setup lang="ts">
    import { defineProps } from "vue";

    interface Props {
        label: string;
        value: string | number;
    }

    const props = defineProps<Props>();
</script>

<template>
    <div>
        <label> {{ label }}: </label>
        <span>
            {{ value }}
        </span>
    </div>
</template>

<style scoped>
    label {
        font-weight: 600;
    }
</style>

// UserDescription.vue
<script setup lang="ts">
    import DescriptionItem from "./DescriptionItem.vue";
    import { defineProps, computed } from "vue";

    interface Props {
        birthDate: string;
        phone: string;
        email: string;
    }

    const props = defineProps<Props>();

    const age = computed(() => {
        if (!props.birthDate) {
            return "0";
        }
        const birthYear = new Date(props.birthDate).getFullYear();
        const currentYear = new Date().getFullYear();
        return currentYear - birthYear;
    });
</script>

<template>
    <div>
        <DescriptionItem
            label="Birth day"
            :value="birthDate" />
        <DescriptionItem
            label="Age"
            :value="age" />
        <DescriptionItem
            label="Phone number"
            :value="phone" />
        <DescriptionItem
            label="Email"
            :value="email" />
    </div>
</template>

After that, I will create a tooltip component. Creating a separate tooltip allows me to reuse it in other parts of the system.

// Tooltip.vue
<script setup lang="ts">
import {
  Teleport,
  computed,
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
} from "vue";

const isMouseOver = ref(false);
const targetRef = ref<HTMLDivElement>();
const dropdownStyle = ref({});
const dropdownRef = ref<HTMLDivElement>();

const existModalElement = document.getElementById("modal");

if (!existModalElement) {
  // add modal element in body to prevent overflow issue
  const modalElement = document.createElement("div");
  modalElement.id = "modal";
  document.body.appendChild(modalElement);
}

const onMouseOver = () => {
  if (isMouseOver.value) {
    return;
  }
  isMouseOver.value = true;
  const dimension = targetRef.value.getBoundingClientRect();
  dropdownStyle.value = {
    width: `${dimension.width}px`,
    left: `${dimension.x}px`,
    top: `${window.scrollY + dimension.y + dimension.height + 5}px`,
  };
};

const onMouseLeave = () => {
  isMouseOver.value = false;
};
</script>

<template>
  <div @mouseover="onMouseOver" @mouseleave="onMouseLeave" ref="targetRef">
    <slot name="default" />
  </div>
  <Teleport to="#modal">
    <div
      ref="dropdownRef"
      :style="dropdownStyle"
      style="position: absolute"
      v-show="isMouseOver"
    >
      <Card>
        <slot name="overlay" />
      </Card>
    </div>
  </Teleport>
</template>

Finally, I will combine the components together like below

For the User Setting page, I will use the user card component which consists of card, avatar, name component and user detail components.

// UserWithDescription.vue
<script setup lang="ts">
import AppCard from "./Card.vue";
import DescriptionItem from "./DescriptionItem.vue";
import Avatar from "./Avatar.vue";
import UserName from "./UserName.vue";
import UserDescription from "./UserDescription.vue";
import { defineProps } from "vue";

interface Props {
  firstName: string;
  lastName: string;
  image?: string;
  birthDate?: string;
  phone?: string;
  email?: string;
  address?: string;
}

const props = defineProps<Props>();
</script>

<template>
  <AppCard>
    <Avatar :image="image" />
    <div>
      <div>
        <UserName :firstName="firstName" :lastName="lastName" />
      </div>
      <UserDescription v-bind="props" />
    </div>
  </AppCard>
</template>

As for the Employee Directory page, I plan for 2 combined components

The basic user card component which consists of card, avatar and name components.
The user tooltip component which consists of card, tooltip and user detail components.

// UserCard.vue
<script setup lang="ts">
    import AppCard from "./Card.vue";
    import DescriptionItem from "./DescriptionItem.vue";
    import Avatar from "./Avatar.vue";
    import UserName from "./UserName.vue";
    import { defineProps } from "vue";

    interface Props {
        firstName: string;
        lastName: string;
        image?: string;
    }

    const props = defineProps<Props>();
</script>

<template>
    <AppCard>
        <Avatar :image="image" />
        <div>
            <div>
                <UserName
                    :firstName="firstName"
                    :lastName="lastName" />
            </div>
        </div>
    </AppCard>
</template>

// UserCardWithTooltip.vue
<script setup lang="ts">
    import ToolTip from "./Tooltip.vue";
    import UserDescription from "./UserDescription.vue";
    import UserCard from "./UserCard.vue";
    import Card from "./Card.vue";
    import { defineProps } from "vue";

    interface Props {
        firstName: string;
        lastName: string;
        image?: string;
        birthDate?: string;
        phone?: string;
        email?: string;
    }

    const props = defineProps<Props>();
</script>

<template>
    <ToolTip>
        <UserCard v-bind="props" />
        <template #overlay>
            <Card>
                <UserDescription v-bind="props" />
            </Card>
        </template>
    </ToolTip>
</template>

For more details on the refactored codes of this case study, please check out the solution.

Note: You may notice that the solution provide is based on Atomic Design concept. The concept can minimize the "reusability" challenge in the first place. If you are interested on how it can apply to Vue.js, please see my colleague's article.

Do Unit Tests Help?

Some may think that writing unit tests for reusable components will ease this problem. It's true comprehensive test coverage helps ensure that modifications and enhancements to components do not accidentally break functionality.

However, unit tests do not make a component more reusable. It just makes it more robust. In fact, refactoring into smaller components breaks tasks into specific pieces and makes writing unit tests more manageable.

Conclusion

Creating actual reusable components in Vue.js can be challenging due to issues related to modifying existing components, maintaining consistency, and managing dependencies and state. However, the benefits of reusable components make it worth overcoming these problems. Reusable components enhance code organization, improve development efficiency, and facilitate the creation of consistent user interfaces. As we face new requirements or tasks, we will improve so that we can better ourselves at designing reusable components.

Check Out Vue PDF Viewer for Your Next Project

If you’re working with Vue.js and need a PDF viewer that’s easy to integrate and highly customizable, you should check out Vue PDF Viewer. It allows you to display PDFs directly within your Vue or Nuxt apps, with over 20 features including theme customization, localization, and responsive design.

I’d really appreciate it if you could give Vue PDF Viewer a try and let me know what you think! Your support will help me keep creating more useful tools and content 🙏🔥