Vue.js is still one of the top frameworks you can use to build modern web apps. A good UI library helps make working with Vue.js even better. Every year, the landscape shifts a bit, some libraries rise, others fade, and new players enter the game.

In 2025, we saw Radix Vue rebrand to Reka UI. NuxtLabs joined Vercel and made Nuxt UI Pro features free and open-source. Headless libraries got even more popular. More people now focus on accessibility and on using Tailwind CSS together.

In this article, I will talk about 5 top Vue.js UI libraries for web development in 2026. These are the ones you should know about, whether you want to start a new project or make your old one better. Let’s jump in! 🚀

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 and toolbar customization, annotation, web responsive and more.

I’d love for you to check Vue PDF Viewer out! Your support means the world and helps me create more awesome content like this. ❤️

1. Vuetify

Vuetify is still one of the top Vue component library for using Material Design with Vue.js. It's been around for years, and that maturity shows. The documentation is excellent, the component library is massive, and the community support is strong.

What makes Vuetify stand out is its balance of power and being easy to change. You get 80+ ready-made components out of the box, But when you want to change how things look, it is simple and easy to do so. Vuetify works well with Nuxt 3. It also lets you set up SSR or SPA, so you have more ways to build your site.

As of January 2026, Vuetify has over 41,000 GitHub stars and around 700,000 weekly downloads. This shows the steady growth and the trust people have in it.

Features:

• 80+ pre-designed Material Design components

• Powerful theming with easy customization

• SSR and SPA support with excellent Nuxt 3 integration

Learn more on https://vuetifyjs.com

2. PrimeVue

PrimeVue continues to show good results. Backed by PrimeTek, this library gives you more than 90 components, including various Vue components and over 200 icons. It stands out as one of the best options in the Vue ecosystem. It's lightweight, has solid Tailwind CSS integration, and handles enterprise-level complexity without feeling bloated.

The API is easy to use, so customization doesn't require jumping through hoops. You can get data tables, charts, or parts for forms with PrimeVue. It has all that you need.

As of January 2026, PrimeVue has over 14,000 GitHub stars (up from 11,000 in 2025) and around 480,000 weekly downloads. The growth has been impressive.

Features:

• There are over 90 components. These include charts, data tables, and parts you use in forms.

• WAI-ARIA compliant accessibility

• Tailwind CSS integration and flexible theming

Learn more on https://primevue.org/

3. Element Plus

Element Plus picked up where Element UI left off, and now it is one of the great choices for Vue 3. The clean UI style, strong TypeScript support, and Composition API design make it a good pick for any project size.

What stands out is how easy it is to get started. The documentation is thorough, the examples are practical, and the component library covers most use cases without much customization needed. Internationalization support is built in, which is a bonus for global projects.

As of January 2026, Element Plus has over 27,000 GitHub stars and around 350,000 weekly downloads. Steady and reliable.

Features:

• Rich component library with clean, customizable themes

• Strong TypeScript and Composition API support

• Built-in internationalization (i18n)

Learn more on https://element-plus.org/en-US/

4. Quasar

Quasar is more than a UI library. It's a full framework that lets you build SPAs, SSR apps, PWAs, mobile apps, and desktop apps from a single codebase. This cross-platform use is what makes Quasar stand out from others.

On the UI side, you get 70+ Material Design components, several sets of icons (Material, FontAwesome, Bootstrap, and more), and tools built-in for things like animations, dates, and using different languages. The documentation is clear and well-organized. This makes it easier for you when you work on many platforms.

As of January 2026, Quasar has over 27,000 GitHub stars and around 190,000 weekly downloads. It's a mature project that continues to deliver.

Features:

• Cross-platform: SPA, SSR, PWA, Mobile (Cordova/Capacitor), Desktop (Electron)

• 70+ Material Design components with multiple icon sets

• Built-in i18n, animations, and utility functions

Learn more on https://quasar.dev/

5. Reka UI (formerly Radix Vue)

Radix Vue rebranded to Reka UI in 2025, but the main goal remains the same. It gives you headless, accessible components for Vue. If you know Radix UI in React, this is the same thing but for Vue.

Reka UI gives you unstyled building blocks like dialogs, dropdowns, sliders, and tabs. You add the style you want, and it handles the accessibility and behavior. Every component is WAI-ARIA compliant out of the box, with proper keyboard navigation and focus management all set up.

The library has seen a lot of people use it. As of January 2026, Reka UI has around 6,100 GitHub stars and over 590,000 weekly downloads. A big part of this growth comes from Nuxt UI, which uses Reka UI as its base.

Features:

• Headless, unstyled components that give you full control over how you style them

• WAI-ARIA compliant with keyboard navigation and focus management

• Lightweight and modular for Vue 3 and Nuxt projects

Learn more on https://www.radix-vue.com/

Special Mention: Nuxt UI

Nuxt UI had a big year. In 2025, NuxtLabs became a part of Vercel and merged Nuxt UI Pro into the free tier. Now, you get over 100 components, top templates, and a full Figma kit. All of this is free for everyone.

Nuxt UI is made for Nuxt projects. It uses Reka UI and Tailwind CSS as its base. It also supports plain Vue with a Vite plugin. SSR, SSG, and dark mode work out of the box. If you're in the Nuxt ecosystem, this is the obvious choice.

As of January 2026, Nuxt UI has around 6,100 GitHub stars and over 169,000 weekly downloads. With the v4 release, these numbers will likely go up.

Features:

• Over 100 components, now fully open source (previously Pro)

• Built on Reka UI and Tailwind CSS

• Works with Nuxt and plain Vue (via Vite plugin)

Learn more on https://ui.nuxt.com/

Conclusion

So which Vue.js UI library should you use for your next project? Here's the quick run-through:

• Go with Vuetify if you want a strong and well-known library that uses Material Design. It has tons of components and strong community support.

• Choose PrimeVue for a full library that is enterprise-ready and has great Tailwind CSS support.

• Pick Element Plus when you need a clean and reliable library. It works well with TypeScript and easy internalization.

• Use Quasar if you want to build apps for multiple platforms (SPA, PWA, mobile, desktop) from a single codebase.

• Try Reka UI when you want headless, accessible building blocks and full control over styling.

Bonus: Nuxt UI is now fully open source with 100+ components. If you're in the Nuxt ecosystem, it's definitelly a top choice.

Each library has its own strengths. The right choice for you will depends on your project's needs, your team's workflow, and how much styling control you want. Try different ones, see what works, and build something great. 🚀

Vue PDF Viewer: A PDF Viewer Made for Vue.js Developers 🚀

I mentioned Vue PDF Viewer earlier, and I'd love for you to check it out. We built it to make PDF viewing in Vue and Nuxt effortless, with theme customization, annotation support, responsive layouts, localization, and smooth integration built in. You do not need a long setup. Just add it, and it will work.

If you need to use PDF tools in your project, give it a try! Your support lets us make the library better and share more helpful content for the Vue community. 🙏

Thanks for reading, and good luck with your next project!

For Vue developers, knowing which open-source PDF Viewer and annotation libraries work best can save hours of trial and error. You can even mix and match libraries to tackle multiple use cases, from fast document rendering to advanced markup. The right solution solve the hassle of juggling pop-ups, downloads, or iframe workarounds.

Here're are the six open-source libraries you need to know as you look for the ideal fit for your next Vue.js project.

Before we jump into the list of libraries, here’s something worth checking out: a flexible Vue PDF rendering solution built specifically for Vue 3.

Whether you’re building a dashboard, AI PDF chat tool, or internal tool, Vue PDF Viewer makes it easy to embed PDF viewing right inside your app. It supports:

• Mobile responsive viewing

• Built-in toolbar and search

• Text selection, zoom, thumbnails, and more

• Easy theming and layout overrides

With minimal setup and strong TypeScript support, it’s a solid option if you’re looking for an all-in-one PDF solution with modern features and clean design.

Why Open-Source PDF Viewer and Annotation Libraries Matter for Vue Developers

Building robust document features in Vue has moved way beyond just dropping a PDF link on a page. Users want to read, highlight, mark up, and sign documents right inside your app. Open-source PDF viewer and annotation libraries make this level of integration possible.

• Cost Saving: No hidden usage or licensing fee. No vendor lock-in.

• Transparency: You can inspect, debug, and improve the code, with full visibility into how things work.

• Flexibility and Control: Customize, extend, or combine libraries to fit your app’s needs without being boxed in.

Vue-Focused PDF Viewer Libraries

Before diving into specific libraries, it’s important to understand PDF.js. Most open-source PDF Viewer libraries for Vue are built on top of it. It's the backbone for rendering, navigating, and interacting with PDF files inside your browser.

What is Mozilla PDF.js?

PDF.js is an open-source JavaScript library built and maintained by Mozilla that allows you to render and interact with PDF files directly in modern web browsers. It relies on standard web technologies, making it highly compatible and easy to integrate into frontend stacks like Vue.

This tool isn’t just for displaying PDF pages. It gives you the control to create a full PDF Viewer with built-in zoom, search and text selection. For Vue developers, that means you can keep users in your app and offer rich document features, instead of handing them off to third-party tools.

Key Features

• Render large files with search, zoom, and page navigation

• No license restrictions and vendor lock-in. Use, modify, and ship updates as you see fit

• Responsive viewing for most modern browsers

• Easily integrate with other libraries focused on annotation or signature, creating a PDF experience tailored for your users' needs

PDF.js is often used in websites, web apps, and custom projects where you just want to keep everything in the browser. It’s a solid pick if you want to display documents in a way that just works for everyone. As of July 2025,pdfjs-dist has over 51,400 stars with over 390 contributors on GitHub and an average weekly downloads count of over 4,000,000.

https://github.com/mozilla/pdf.js

vue-pdf-embed

vue-pdf-embed, built on top of PDF.js, offers Vue developers an easy way to embed PDF viewing capabilities into any page or dashboard. It provides an easy-to-use component designed for Vue 2 and Vue 3 to display PDFs without complex setup.

Key Features

• Controlled rendering: Letting you manage how and when pages display.

• Support for password-protected PDF: Keep sensitive files secure and accessible only to the right people.

• Selectable text: Great for users who need to copy or search document content.

• Support annotation layer: PDF with annotations can be displayed easily.

If you need just the basics or want a lightweight viewer with proven usage, this library fits the bill. As of July 2025,vue-pdf-embed has over 890 stars, 25 contributors, and an average weekly downloads count of over 59,000.

https://github.com/hrynko/vue-pdf-embed

@tato30/vue-pdf

@tato30/vue-pdf is a popular Vue wrapper for Mozilla’s PDF.js. It brings deep PDF rendering directly into Vue projects, allowing you to avoid custom wiring with PDF.js’s raw API. It supports many core features of PDF.js and makes it easier to integrate into Vue or Nuxt applications.

Key Features

• Simple integration if your app is already built on Vue 3

• Provide functions like search, zoom level and rotate

• Render control for text, annotations, and optional layers

• Allow custom watermark on PDF pages to protect your content

If you're looking for than a simple PDF reader, this library is great for complex interactions. As of July 2025,@tato30/vue-pdf has over 589 stars with 9 contributors on GitHub and an average weekly downloads count of over 25,000.

https://github.com/TaTo30/vue-pdf

vue-pdf

The vue-pdf library (not to be confused with others with similar names) is an older lightweight wrapper around PDF.js, specifically tailored for Vue applications. By using vue-pdf, Vue developers can enjoy the benefits of PDF.js without needing to manage the complex JavaScript integration manually.

Key Features

• Fast single-page or multi-page PDF rendering

• Simple navigation controls, print and zoom

• Provide events for loading, progress, and error handling

Vue-pdf is ideal for applications that require basic PDF display. It's a practical option for small projects and MVPs where ease of use and quick implementation are prioritized. As of July 2025,vue-pdf as over 2,300 stars with 20 contributors on GitHub and an average weekly downloads count of over 17,000.

https://github.com/FranckFreiburger/vue-pdf

⚠️ The library has not been updated since Jun 2021 so use it with caution. Remember to update pdf-dist version to avoid potential security and compatibility concerns.

Open-Source PDF Annotation Libraries for Vue

Modern applications demand more than just displaying PDFs. Users now expect to draw, highlight, and leave comments on documents, all inside the browser. Getting annotation tools right can make or break PDF Viewing experience in a Vue.js project. Here's how three powerful open-source options stack up for bringing annotations to life in Vue apps.

pdf-lib

If you are looking to programmatically annotate PDFs in your Vue project, pdf-lib stands out. This open-source JavaScript library lets you work with PDFs in the browser and on the server. It’s not just a PDF annotator, it supports form creation, content editing, and even digital signatures.

Key Features

• Add new shapes, signatures, or freehand scribbles.

• Highlight text sections in a way that’s easy for users to spot later.

• Attach notes or pop-up comments to any part of the PDF.

• Has no external dependencies, keeping your bundle size manageable and integrations simple.

With a clean API, Vue coders can use pdf-lib to create or update complex annotations dynamically, storing them in the user’s browser or syncing them with a backend as needed. As of July 2025, pdf-lib has over 7,700 stars with 42 contributors on GitHub and an average weekly downloads count of over 1,480,000.

https://github.com/Hopding/pdf-lib

⚠️ The library has not been updated since Nov 2021 so use it with caution. There is a forked version but I'm unable to verify its current status.

sinatayebati/pdfjs-annotation

For devs who want a faster setup, sinatayebati/pdfjs-annotation offers a Vue-based annotation UI, tightly wrapped around Mozilla PDF.js. You get a ready-to-use PDF Viewer plus a complete set of annotation features built right in.

Key Features

• Annotation tools includes shapes, highlights, free text and more

• Designed to overlay on PDF.js within a Vue context, so your data stays reactive and easy to sync.

• Annotation widgets and toolbars are part of the package, so you don't have to build them from scratch.

This wrapper takes a lot of guesswork out of document enhancement. You can enrich PDF files with highlights or notes and never leave the app’s single-page flow.

https://github.com/sinatayebati/pdfjs-annotation

That's right, Mozilla PDF.js

Did you know that PDF.js has started rolling out annotation editor back in v3.0.279 released in October 2022. Just for context, the most recent version of PDF.js is 5.3.93. Surprising there isn't a lot information on how to utilize annotation functions in PDF.js

Key Features

• Highlight, underline, strikethrough text or areas for instant visual cues

• Drop virtual notes anywhere in your PDF to collaborate easily

• Add new shapes, images, or free text to enrich your PDF file

Knowing how to integrate and extend PDF.js can turn your app from a simple PDF viewer into a dynamic document experience that users will love.

Demo: https://mozilla.github.io/pdf.js/web/viewer.html

How Combining Libraries Boosts PDF Functionality

If a single library does not all of your use cases, you could consider combining libraries in your Vue project. Think of your PDF stack like LEGO blocks. You can mix libraries—one for fast viewing, one for deep annotation, another for e-signatures or forms—to create the setup your project actually needs.

For instance:

• Start with vue-pdf-embed for light, fast viewing inside dashboards

• Bring in pdf-lib if you want to annotate PDF or handle form data behind the scenes

This mix-and-match method keeps your app flexible. When a new requirement or feature comes along, you just swap or add another piece, rather than rebuilding from scratch. Combining open-source libraries helps you tailor the user experience and stay in control.

How to Choose the Right Library for Your Project

With so many open-source options available, making the right choice starts with focusing on what your users need and what works for your workflow. A good fit saves you time, keeps your app smooth, and lets your users read, search, and mark up documents without any distractions:

1. Vue Compatibility - Libraries based on Vue take advantage of hooks, props, and state for smooth integration. Generic JS tools may need more setup or “glue code.”

2. Know Your Use Cases - By mapping out your core requirements, you won’t get distracted by extra features you’ll never use. You’ll hone in on what matters.

3. Community and Documentation - A powerful library is only as good as its documentation and community. Scan GitHub stars and check for active issues.

4. Performance - Performance matters, especially for web apps that serve large or image-heavy documents. Explore if the libraries uses techniques like lazy loading or virtualization to keep things fast

Real-World Testing

Finally, never trust a demo alone. Pull in a few sample PDFs from your users with a quick prototype. Try different annotation workflows. Make sure font rendering, zoom, and navigation all work as expected. A little time spent testing now can save you endless fixes down the road.

If you liked this article, take a look at a library for Vue PDF, a modern PDF viewing solution built specifically for Vue 3 apps. It’s designed to drop smoothly into your Vue ecosystem, whether you’re using PrimeVue, Vuetify, or your own custom UI setup.

Vue PDF Viewer helps you build polished document experiences without starting from scratch. Features include:

• Vue 3 Composition API support

• Responsive UI with thumbnails, toolbars, and other tools such as highlights, zoom and search

• Works with both local and remote files

• Clean APIs and typed props for full developer control

Vue PDF Viewer is actively maintained and developer-focused. If you’re building serious document functionality in Vue, it’s worth a look 🙏

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. 🔧📄

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:

1. Install the PDF.js library via npm.

2. Create a component to display the PDF viewer.

3. 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:

1. Install the vue-pdf-embed library via npm.

2. Import and use the component in your App to display the PDF.

3. 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:

1. Install @tato30/vue-pdf via npm or yarn.

2. `Import the component and register it globally or locally.

3. 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:

1. Install @vue-pdf-viewer/viewer and its peer dependency pdfjs-dist via npm or yarn.

2. Import and register the component in your Nuxt app.

3. Use the component in your template and set the PDF file URL or path via the src prop.

Here is the link to the 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! 🙏

1. PDF Viewing: Loading PDF files of various types and sizes should be smooth.

2. Default Toolbar: Basic functions such as search, zoom, page navigation and download should be readily available

3. Print Preview: Depending on where the viewer is rendered, print results may not work as expected.

Although there are a few open-source libraries PDF Viewer for Vue like @tato30/vue-pdf or vue-pdf-embed, unless you are looking for a simple PDF renderer, these solutions may not be sufficient.

👉 Want a Vue-first, production-ready PDF viewer? Try Vue PDF Viewer and skip the duct tape.

Let’s walk through the three biggest problems I’ve seen when building Vue PDF viewers, starting with the one that kills performance: virtual scroll.

The Challenge of Smooth PDF Rendering: Virtual Scroll in Vue.js Projects

Ever tried scrolling through a dense PDF—hundreds of pages deep—and felt your Vue.js app just stutter to a halt? You’re not alone. Virtual scroll is supposed to be the silver bullet, loading only the pages on-screen while the rest chill in the background. But with PDFs, it’s rarely that simple.

Let’s break down why virtual scroll can be such a pain in Vue projects, what usually goes wrong, and why most open-source solutions struggle to keep up.

Why Virtual Scroll is Harder Than It Looks

Implementing virtual scroll for a basic data table is one thing. PDFs bring their own flavor of chaos:

• Rendering is resource-heavy: Each page is basically a mini-canvas. Scroll quickly, and you’re hit with a flood of draw calls.

• State management is complex: Tracking which pages are visible, cached, or ready to be released isn’t as straightforward as with a static list.

• UI jank: Jumping to a deep page? Expect scroll position jumps or content flashes.

• Memory leaks: Stale canvas elements often stick around, especially if you're scrolling like it's a speedrun.

And yes, libraries like @tato30/vue-pdf or vue-pdf-embed can help for smaller files, but they weren’t built with high-performance virtual scroll in mind. Push them hard, and you’ll still hit lag, jank, or blank pages.

What Smooth Virtual Scroll Actually Looks Like?

The gold standard: only the visible pages and a tiny buffer are rendered. As you scroll, new pages appear instantly, and old ones quietly vanish from memory. That's easy with image galleries—but with PDFs? It’s a juggling act. Interactivity, links, and dynamic layers all add a whole new level of complexity.

A truly modern Vue PDF Viewer nails this by:

• Preload just enough pages (not too many!) for fluid scrolling.

• Cache intelligently, releasing canvases when memory spikes.

• React to zoom, theme changes, or annotations without full re-renders.

💡 If you want to see this in action, getting started with Vue PDF Viewer’s basic usage will show you exactly how it handles virtual scroll in a real Vue setup without the usual headaches.

Building a PDF Viewer Toolbar: Out-of-the-Box and Customization Needs

Here’s the deal: everyone loves a slick PDF Viewer—until they have to deal with the toolbar. You either get no toolbar or one with just the basic buttons like next page, previous page and maybe a zoom option. But when your Vue.js app needs a viewer that feels native, the toolbar goes from “nice bonus” to “can’t ship without it.”

What an Out-of-the-Box Toolbar Should Include

Let’s keep it blunt: any PDF viewer worth using should offer these built-in essentials:

• Navigation controls (prev/next, go to first/last page)

• Zoom options (zoom in/out, fit to width)

• Search functionality

• Print support

• Download functionality

Once you've built these functions into your toolbar, you still need to be concerned about mobile responsive layout. If you go a bit deeper, what about handling pinch to zoom without zooming the whole browser?

Toolbar pain is real. If you've worked with open-source tools like @tato30/vue-pdf or vue-pdf-embed, you know exactly what I mean.

Who Really Needs Toolbar Customization?

If your project is anything beyond a basic MVP, you'll need toolbar customizations sooner than you think. Common requirements include:

• Matching company branding with sleek custom icons.

• Hiding or showing tools based on user permissions.

• Customize your toolbar by adding more features like rotate or page view modes.

Customizing your PDF Viewer’s toolbar isn’t just about aesthetics; it’s about functionality, accessibility, and keeping workflows sharp and user-friendly.

But with most open-source libraries, it’s not so easy:

• Poor documentation: Even if customization is technically possible, guides are limited. You’re often left sifting through GitHub issues for someone’s workaround.

• Global styles conflicts: Injecting custom buttons can break theming or hit weird CSS bugs.

For apps in education, legal, or creative fields, a one-size-fits-none toolbar can break the whole product experience.

How Vue PDF Viewer Makes Toolbar Customization a Breeze

Now contrast that with a toolkit built for customization. Vue PDF Viewer puts toolbar control front and center with a slot-based toolbar system, tight icon control, and developer-friendly APIs. You can swap default icons, add new actions, and respond to toolbar events, all without wrestling the core code.

• Default toolbar Functions like search, zoom, rotate, print and download can be shown or hidden easily with props.

• Replace default icons with your own SVGs or icons (finally, branding that fits!).

• Wire up your own logic—trigger downloads, emit events, track analytics.

Ready to give your PDF toolbars a facelift? Dive into the step-by-step tutorial on Adding Custom Icons to Vue PDF Toolbar for a breakdown of how to use slots and Vue components to create a totally cohesive experience.

💡 Looking for even more ways to craft your perfect PDF Viewer and fine-tune every aspect? Skim through the official Customize Vue PDF Toolbar documentation for tips on changing behavior, appearance, and beyond.

Your team—and your users—will notice the difference.

Unreliable Print Preview: Getting it Right in Vue Projects

User expectations are simple: “If I see it, I can print it. And it should look right.” Anything less? Trust evaporates.

Print preview probably sounds easy at first: just click the print button and send your PDF off to the printer. But if you’ve tried this in a Vue project, you might have gotten… well, some pretty unexpected results. From half-rendered pages to chopped-off toolbars making an unwanted cameo on the office laser jet, print issues have haunted developers for years.

The print preview struggle is real—especially when what users see in the PDF Viewer doesn't match what ends up on paper.

How Traditional PDF.js Wrappers Drop the Ball

You hit print, and what comes out looks nothing like what was on-screen. Here’s where things typically go wrong:

• PDF rendering skips ahead: Some viewers only send the visible section of your PDF to the print dialog, cutting off the rest of the document.

• UI elements sneak in: Extra components (think: toolbars, overlays, side menus) end up on your printed document.

• Scrolling glitches: Long PDFs may print blank or half-filled pages if virtual scroll isn’t handled correctly.

• Dialogs make things worse: Trying to print from a modal? Sometimes you’re lucky if it prints anything at all.

In other words, that feeling of déjà vu? You're definitely not alone. These bugs can turn an otherwise polished Vue app into a full-on “Why does Ctrl+P hate me?” moment.

How Vue PDF Viewer Gets Print Preview Right

This is where Vue PDF Viewer stands out from tools like @tato30/vue-pdf or vue-pdf-embed. It treats print preview as a first-class feature, not an afterthought.

No hacks, no browser voodoo. Just solid, built-in support. Here’s what Vue PDF Viewer does differently:

• Isolated rendering for print: Only the PDF itself is rendered for printing. Toolbar, sidebar, and UI elements stay on-screen (where they belong). Every page is included, not just the chunks currently visible on-screen.

• Handles dialogs and overlays: Need to print from a modal or pop-up? No problem. Vue PDF Viewer renders a complete preview inside complex components, avoiding state bugs and z-index nightmares.

• Fallback strategy: If printing issues still persist, the library provides a reliable fallback solution that will always work.

💡 If you want a step-by-step guide on making print preview work (spoiler: it’s less work than you think), the official Vue PDF Viewer print preview tutorial shows exactly how to pull it off🚀

Conclusion

Choosing the right PDF Viewer for your Vue.js project can feel overwhelming—but you deserve smooth sailing, not endless debugging. Virtual scroll stutter, print preview nightmares, and lifeless toolbars have long haunted dev teams building modern PDF experiences. Vue PDF Viewer turns these long-standing issues into non-issues.

Sure, libraries like @tato30/vue-pdf and vue-pdf-embed can get you started, but they're only as valuable as the support you get. Vue PDF Viewer stands apart by staying actively maintained and supported by a team that actually listens. Got a feature request, bug report, or need a demo? There’s responsive feedback and a growing library of docs and examples to help you move fast.

Want to hit the ground running? Dive into the Vue PDF Viewer Basic Toolbar Guide to set up controls that fit your style and workflow. Try Vue PDF Viewer in your next project and feel the difference—no hacks, no duct tape, just PDFs that work the way you hoped.

Got feedback, feature ideas, or battle stories from PDF Viewer integration? Drop them in the comments. What’s your biggest pain point? What feature would change your workflow?

Let’s make the Vue community awesome together. 🚀

@vue-pdf-viewer lets you open, zoom, and interact with PDFs right inside your Vue or Nuxt project. The setup is quick, with features like keyboard controls, responsive layouts, and even advanced document options ready to go. For developers and teams, it’s a straightforward, reliable way to add rich PDF support to any Nuxt-powered app.

Disclaimer: I work at Vue PDF Viewer.

Why Choose @vue-pdf-viewer for Nuxt Applications

If you want smooth PDF handling in your Nuxt project, you need a component that just works. Vue PDF Viewer stands out for its balance of powerful features and simple setup. You can add the library into almost any Nuxt page or component with minimal setup. It's built for Nuxt and Vue, so you avoid heavy solutions or flaky workarounds.

Key Features that Set @vue-pdf-viewer Apart

Vue PDF Viewer offers everything most apps need right out of the box. Here’s what you get:

• Smooth zoom and rotation: Users can view their PDFs up close, rotate pages, and not miss a detail.

• Keyboard navigation: Move through documents without leaving the keyboard.

• Responsive layouts: Fits devices big or small, so mobile users can scroll, zoom, and interact with ease.

• PDF layers support: Support for text, canvas and annotation layers.

• Search and text selection: Users find what they need fast, selecting and copying text directly from the PDF.

• Easy customization: Vue PDF Viewer's toolbar or theme can be configured easily to fit your business needs.

If you want the full list, check the official documentation’s Feature Overview. You’ll see plenty of advanced options, but the defaults work for most projects.

Comparing @vue-pdf-viewer to Other Popular Alternatives

Several tools such as Apryse and Syncfusion compete in this space, but Vue PDF Viewer stands out for its simplicity and Vue-first design:

• Vue-native: Compared to other PDF.js wrappers, Vue PDF Viewer is written entirely in Vue, which means fewer compatibility headaches.

• Lightweight footprint: It’s lighter than some heavyweight tools like Apryse or Syncfusion.

• Feature-rich yet accessible: While many open-source options lack advanced controls or built-in Nuxt support, Vue PDF Viewer gives you both out-of-the-box.

Where @vue-pdf-viewer Shines in Nuxt

You’ll see it in action everywhere—from simple PDF previews to interactive AI-powered PDF tools and full-fledged document management systems. It's a great fit for projects where:

• ✅ You need solid, bug-free PDF rendering.

• ✅ Custom UI or branding matters.

• ✅ Fast time-to-launch is key and the focus is on Vue or Nuxt development.

The component’s flexibility lets you scale from basic views to complex document tools without starting over each time.

Setting Up Your Nuxt Project for PDF Viewing

Getting your Nuxt project ready for PDF viewing starts with a solid foundation. You'll want installation to be smooth and straightforward asset handling to ensure reliable PDF rendering and easy file maintenance.

Install Dependencies and Project Scaffolding

Start by creating a new Nuxt application, or open your existing one.

Nuxt 3 (recommended):

1. Initialize your project:

   • Run npx nuxi init my-nuxt-app to create a basic structure.

   • Enter the project folder: cd my-nuxt-app.

   • Install dependencies: npm install.

2. Add @vue-pdf-viewer:

   • Install the package with npm install @vue-pdf-viewer or yarn add @vue-pdf-viewer.

Here’s a quick checklist before moving ahead:

• Vue 3

• Node 16+ for Nuxt 3

With your dependencies set, you’re ready to handle asset organization.

Configure Static Assets for PDF Files

How you store and serve your PDF files matters, especially when it comes to access speed and basic security. Nuxt 3 typically uses the public folder for this job, but there are a few gotchas to keep your files organized and safe.

In Nuxt 3, any files placed in the public folder are served from the root level. For example, a PDF saved as public/sample.pdf will be available at /sample.pdf in your browser.

Best practices for asset management:

• Organize your PDFs in subfolders (e.g. public/pdfs/) if you plan to store more than a few documents.

• Keep clear, consistent filenames and avoid spaces, use dashes or underscores.

• Regularly clean out unused files to keep your build lightweight.

File access security:

Keep in mind that assets in public or static are publicly accessible. If you're dealing with sensitive or private PDFs, don't place them here. Instead:

• Use authentication and store the files outside public

• Serve them through a secure API or custom middleware.

Useful Resources

• For more on how Nuxt handles public and static files, review the official assets documentation.

• If you want a guide to help you decide where files belong or to understand asset handling differences, check out this breakdown on handling assets in Nuxt 3.

• For quick comparisons on when to use each folder, see the Stack Overflow thread on Nuxt assets and static folders.

By planning where your PDFs live from the start, you avoid confusion later on—especially as your app grows. Keep things neat and protect anything sensitive, and your PDF workflow in Nuxt will stay smooth and manageable.

Integrating @vue-pdf-viewer in a Nuxt Component

With your Nuxt app set up and PDFs organized, the next step is to actually bring your PDF viewer to life. You have a few key choices here: create a self-contained component for on-demand use, wrap the viewer in client-only rendering to avoid SSR issues, or register it globally for reuse in bigger projects.

Here’s a step-by-step guide to each approach so you choose the one that fits your needs best.

📘 Related: You can also follow the official Nuxt setup guide in the documentation for a simpler quick-start example

Creating a Reusable PDF Viewer Component

To start, it’s best to build a dedicated Vue component that handles all your PDF viewing logic. This keeps your code tidy and lets you drop the viewer anywhere in your app.

Here’s how you can do it:

1. Create a new file in your components folder. e.g. PdfViewer.vue

2. Import @vue-pdf-viewer/viewer and define your props.

3. Pass in the src prop, which is the path to your PDF file.

4. Optionally, add viewer options to customize controls or appearance.

Example code: components/PdfViewer.vue

<script setup>
import { ref } from 'vue'
import { VPdfViewer } from '@vue-pdf-viewer/viewer'

const pdfSrc = ref('/pdfs/sample.pdf') // or use a prop for dynamic paths
</script>

<template>
  <v-pdf-viewer :src="pdfSrc" />
</template>

This setup lets you easily update the source PDF or tweak viewer settings as needed. For more details about best practices with Vue components in Nuxt, check out the Nuxt components directory guide.

Client-Side Only Rendering with

Rendering PDF viewers on the server (SSR) can cause headaches since browser-specific APIs don’t exist during server-side rendering. Nuxt provides a simple fix with <ClientOnly> component in Nuxt 3.

How to use it:

In Nuxt 3, Wrap your PDF viewer like this:

<script setup>
import PdfViewer from './components/PdfViewer.vue'
</script>
<template>
 <ClientOnly>
  <PdfViewer />
 </ClientOnly>
</template>

What does this do?

<ClientOnly> tells Nuxt to delay rendering of your PDF viewer component until it's running in the browser. This prevents SSR-related errors from happening when browser-only code is accessed too early.

If you need a deeper explanation or run into issues, check out this discussion on Nuxt client-only plugins.

Using Nuxt Plugins for Global Registration

If your app needs to display PDFs in many places, it helps to register the viewer as a global component. Nuxt’s plugin system makes this smooth and keeps your code DRY (don’t repeat yourself).

Here’s the approach:

1. Create a new plugin file in plugins/vue-pdf-viewer.js (or .ts).

2. Import and register @vue-pdf-viewer globally.

3. In your Nuxt config, make sure the plugin is loaded only on the client.

Example for Nuxt 3:

// plugins/vue-pdf-viewer.client.js
import { defineNuxtPlugin } from '#app'
import { VPdfViewer } from '@vue-pdf-viewer/viewer'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VPdfViewer', VPdfViewer)
})

Nuxt automatically reads the files in the plugins/ directory and loads them at the creation of the Vue application. For full details, visit the Nuxt plugins directory documentation.

With the viewer globally registered, you can use <VPdfViewer /> anywhere in your project—no manual imports needed. This approach saves you from repetitive imports and keeps your codebase neat as your app scales.

Bonus Section: Styling Your PDF Viewer

Nobody wants a PDF viewer that looks out of place or breaks your app’s design flow. With a little effort, you can easily style @vue-pdf-viewer to match your branding.

Tips for styling:

• Use CSS for visual tweaks: Adjust background colors, spacing, and toolbar icons by targeting the viewer’s CSS classes. For detailed steps and best practices, check out this resource on customizing CSS in PDF viewers.

• Use Slots for custom controls: Vue’s slot system makes it easy to insert your own buttons or menus on the toolbar or sidebar.

• Hide or reorder UI parts: Vue PDF Viewer toolbar can be toggled or reorganized through props or CSS. Keep only what you need on the screen.

Conclusion

Launching a PDF viewer in Nuxt with Vue PDF Viewer is fast and hassle-free. You get powerful display options, modern controls, and responsive layouts—ready to go with just a few steps. The component’s flexibility means you can start simple or customize for a tailored user experience.

🙏 Thanks for reading—if you’ve tried this in your own Nuxt app, please feel to share what you built or what you want to see next in Vue PDF Viewer.

I'm looking forward to seeing what you build with Vue PDF Viewer 🚀

That’s where PDF.js comes in—it's an open-source JavaScript library for rendering PDFs right in your browser. Now, if you’re like me and build apps in Vue.js, figuring out how to use PDF.js in your project can be tricky at first.

To leverage PDF.js's capabilities, it's important to understand its layered architecture. If you’ve ever wondered, “How do I enable text selection?” or “How do I handle links inside the PDF?” or even “How do I build advanced features like annotations?”, the answer usually lies in understanding these layers.

In this article, I’ll show you how PDF.js creates layers, what each layer is responsible for, and how you can apply them to your next Vue project. Let’s get going!

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

Quick heads up on something I’ve been working on: Vue PDF Viewer, a handy PDF Viewer that renders PDFs right within your Vue or Nuxt app. It packs over 20 features, including out-of-the-box default toolbar, customization and responsive design, so your users never have to leave your site to interact with your documents.

If that sounds interesting, I’d love for you to give Vue PDF Viewer a try. Your support helps me keep creating awesome tools and tutorials like this one. ❤️

Overview of PDF.js Layers

Before we dive in deep, here’s a quick snapshot of the four major layers in PDF.js. Each layer handles a specific aspect of rendering or user interaction:

1. Canvas Layer: Renders the static visual content of your PDF (shapes, images, text-as-graphics). It is the foundation of the PDF Viewer.

2. Text Layer: Sits on top of the canvas to ensure that text is selectable and searchable.

3. Annotation Layer: Handles interactive elements (links, forms, highlights) so users can click, type, or navigate.

4. Structural Layer: Manages the overall layout, including alignment and scaling for all the other layers.

By splitting different functionalities into distinct layers, PDF.js remains modular, efficient, and surprisingly easy to tweak.

Let’s start by creating a fresh Vue.js project to integrate PDF.js.

Set up Vue.js Project

In this article, I used Codepen as a code editor. If you want to follow along, you can create a new Pen on Codepen and follow the steps below.

Step 1. Pick a Vue Pen Template

The easiest way to get started is by using CodePen’s built-in Vue template. From the left menu, click on the Pen menu to open the options, then pick Vue Pen.

This gives you a preconfigured environment with a default Vue setup. In this interface, you can experiment with Vue code and instantly see your results in the preview area.

Step 2. Configure the project and install PDF.js

Next, let’s configure our Vue project to use the pdfjs-dist library.

1. Open Settings: Click on the Settings button at the top of your Pen.

2. Select JS Options: In the popup, switch to the JS tab.

3. Pick Vue Version: Under Vue version, select Vue 3 (or whichever version fits your needs).

4. Add Packages: In the Add Packages box, search for and add pdfjs-dist.

5. Save and Close: Click Save & Close to apply your changes.

CodePen will automatically inject an import statement for pdfjs-dist into your code. You’ll typically want to move that statement below your <script> section to keep things clean and organized.

That’s it! You’re now set up to start experimenting with PDF.js layers within a Vue environment. So let us get to the layers.

1. Canvas Layer

Purpose

The Canvas Layer is the foundation—it’s where PDF.js draws the visual elements such as images, shapes, and text (as graphics). Essentially, what you see on-screen is coming from this layer.

How It Works

• PDF.js uses the HTML <canvas> element to display the PDF's visual content

• It utilizes the browser's 2D canvas API for high-performance rendering.

• This means your PDF content will look consistent and accurate across various screen sizes and devices.

Use Cases

• Ideal for non-interactive or static PDF content.

• It renders the document as an image, ensuring PDF’s fonts, colors, and layouts are consistent across all devices.

Example of Canvas layer Code with Vue

Here’s a quick CodePen demo showcasing a minimal Canvas Layer setup in Vue.js.

{% codepen https://codepen.io/9haroon/pen/vEBVBqR %}

📜 How the Code Works

Below, I’ll walk through the major steps for rendering a PDF page onto the canvas.

(1) Setting Up the PDF Worker

Before loading the PDF, we need to configure the PDF worker. The worker is responsible for processing the PDF in a separate thread, improving performance.

import * as PDFJS from "https://esm.sh/pdfjs-dist";
import * as PDFWorker from "https://esm.sh/pdfjs-dist/build/pdf.worker.min";

try {
  PDFJS.GlobalWorkerOptions.workerSrc = PDFWorker;
} catch (e) {
  window.pdfjsWorker = PDFWorker;
}

Explanation:

• Here, we import pdf.worker.min.js and set it as the worker source.

• The worker processes the PDF in a separate thread so our UI is not blocked.

• If an error occurs, the worker is assigned to window.pdfjsWorker as a fallback

(2) Fetching and Loading the PDF

 const PDF_SRC = "https://pdfobject.com/pdf/pdf_open_parameters_acro8.pdf";
 export default {
  ...
  methods: {
    processLoadingTask(source) {
      const loadingTask = PDFJS.getDocument(source);
      loadingTask.promise
      .then(docProxy => ...)
      .then(page => {
         ...
         const renderContext = {
           canvasContext: context,
           viewport: viewport
         };
         return page.render(renderContext);
      })
    }
   },
   // Start the process when the component is mounted
   mounted() {
    this.processLoadingTask(PDF_SRC);
   }
 }

Explanation:

• The processLoadingTask method initializes PDF loading via PDFJS.getDocument(source) from pdfjs-dist.

• Once the PDF is fetched (from PDF_SRC), we store the document proxy (docProxy).

• The total number of pages is determined and stored in totalPages.

(3) Rendering the Canvas Layer

Explanation: After the PDF is loaded and we have a page object, the first page is extracted using getPage(1). PDF.js then:

• Scales the canvas to match the PDF page dimensions.

• A <canvas> element (canvasLayer) is used to render the PDF page as an image.

• The rendering process is handled by page.render(renderContext), where canvasContext paints the page content onto the canvas.

This ensures the final output accurately matches the original PDF’s appearance.

2. Text Layer

Purpose

The Text Layer ensures that the text in your PDF is selectable, searchable, and accessible. While the Canvas Layer does the heavy lifting of rendering visuals, the Text Layer is what lets you highlight and copy actual text.

How It Works

• PDF.js extracts the text content separately from the PDF.

• It positions each piece of text exactly over the underlying canvas, using absolutely positioned <div> elements.

• Even though you might not see these text <div> visually (they’re often transparent), they’re there to support selection and searching.

Use Cases

• Enable text selection and copying from the PDF.

• Text layer is crucial for accessibility, as it enables screen readers to interpret the content.

• Provide text searching and highlighting within the PDF viewer.

• Keep the text aligned with the rendered PDF page

Text layer Code Example

Here’s a Vue.js CodePen example that demonstrates a Text Layer in action:

{% codepen https://codepen.io/9haroon/pen/GgKbgmm %}

📜 How the Code Works

(1) Structuring the Layers

<div ref="pdfLayersWrapper" class="pdf__layers">
  <div class="pdf__canvas-layer">
    <canvas ref="canvasLayer" />
  </div>
  <div ref="textLayer" class="pdf__text-layer"></div>
</div>

Explanation:

• The pdfLayersWrapper is a container that holds both the Canvas Layer and the Text Layer.

• The Canvas Layer (canvasLayer) displays the PDF page visually.

• The Text Layer (textLayer) sits on top of the canvas, allowing text selection.

(2) Fetching and Loading the PDF

(Identical to the steps in the Canvas Layer—we load the PDF document first.)

(3) Rendering the Text Layer

renderText(pdfPageProxy, textLayerContainer, viewport) {
  ...
  pdfPageProxy
    .getTextContent()
    .then((content) => {
      const renderTask = new PDFJS.TextLayer({
        container: textLayerContainer,
        textContentSource: content,
        viewport: viewport.clone({ dontFlip: true })
      });
      return renderTask.render();
    });
 },
 processLoadingTask (source) {
  ...
  this.renderText(...)
 }

Explanation:

• Render the text layer (this.renderText()).

• pdfPageProxy.getTextContent() retrieves the text data from the PDF page.

• This data is passed into a new TextLayer, specifying:

  • container: Container where text is rendered.

  • textContentSource: Extracted text data from the PDF.

  • viewport: Defines text positioning and scaling.

• renderTask.render() places invisible but selectable text <div> over the canvas.

3. Annotation Layer

Purpose

The Annotation Layer handles interactive elements like hyperlinks, highlights, form fields, and comments. If you need your PDF viewer to support internal linking (jumping to different pages), or if your PDFs have fillable forms, this layer is for you.

How It Works

• PDF.js extracts annotation data (links, form fields, etc.) from the PDF.

• It overlays these data as interactive HTML elements (e.g. <a>, <input>, <textarea>), which sit above the Canvas Layer and Text Layer positioned using CSS.

• This layer ensures that users can click, type, and interact without altering the PDF’s static visuals.

Use Cases

• Clicking on links within PDF to navigate between pages.

• Rendering highlights, underlines, and notes from PDF annotations.

• Displaying interactive form fields within a PDF.

Annotation layer Code Example

Check out this CodePen example on the Annotation Layer for Vue.js:

You can click the links inside the Codepen to change the PDF's page.

{% codepen https://codepen.io/9haroon/pen/qEWzOzz %}

📜 How the Code Works

(1) Structuring the Layers

<div ref="pdfLayersWrapper" class="pdf__layers">
  <div class="pdf__canvas-layer">
    <canvas ref="canvasLayer" />
  </div>
  <div ref="textLayer" class="pdf__text-layer"></div>
  <div ref="annotationLayer" class="pdf__annotation-layer"></div>
</div>

Explanation:

• We add another <div> for the Annotation Layer within pdfLayersWrapper.

• The Annotation Layer is positioned on top of the Canvas Layer and Text Layer.

(2) Fetching and Loading the PDF

(Again, the same initial PDF loading steps as before.)

(3) Rendering the Annotation Layer

 async getAnnotations(pageProxy) {
  const annotations = await pageProxy.getAnnotations({ intent: "display" });
  return annotations;
 },
 async renderAnnotations(pdfPageProxy, annotationLayerContainer, viewport) {
   const annotations = await this.getAnnotations(pdfPageProxy);
   ...
   const annotationLayer = new PDFJS.AnnotationLayer({
    div: annotationLayerContainer,
    viewport: clonedViewport,
    page: pdfPageProxy
  });
  await annotationLayer.render({
    ...,
    annotations,
    linkService: new SimpleLinkService(),
    ...
  })
 }

Explanation:

• getAnnotations retrieves all annotation info from the PDF page (links, form fields, etc.).

• We clone the viewport to match the page’s dimensions for correct positioning.

• renderAnnotations is then called to replace existing elements in annotationLayerContainer before rendering new ones. It does so by:

  • Creating a new AnnotationLayer instance to manage and render annotation elements.

  • Displaying the annotation layer by annotationLayer.render({...}), passing in the annotations and SimpleLinkService() to handle internal PDF links.

(4) Handling Internal Link Clicks

...
annotationLayerContainer.addEventListener("click", async (event) => {
  ...
  const annotationLinkId = annotations.find((ele) => ele.id === id);
  ...
  const pageIndex = await this.pdfDocProxy.getPageIndex(
    annotationLinkId.dest[0]
  );
  this.currentPage = pageIndex + 1;
});

Explanation:

• When a user clicks on a link inside the PDF, the event checks if it's an annotation.

• If it is, we look up the destination page by getPageIndex() and see if it points to a different page in the PDF.

• We then navigate to that page by updating this.currentPage.

(5) Handling Page Navigation

• A simple navigation bar lets users switch between pages.

 <div class="page-navigation">
  <button :disabled="currentPage <= 1" @click="--currentPage">
   &larr; 
  </button>
  <span>{{ currentPage }}/{{ totalPages }}</span>
  <button :disabled="currentPage >= totalPages" @click="++currentPage">
   &rarr;
  </button>
 </div>

Explanation:

• The currentPage value updates when navigation buttons are clicked.

• watch: { currentPage(newValue) { ... } } ensures that all layers are re-rendered when the page changes.

• This ensures all layers—Canvas, Text, and Annotation—stay in sync.

4. Structural Layer

Purpose

Think of the Structural Layer as the master layout manager. It keeps the Canvas, Text, and Annotation layers correctly aligned, scaled, and positioned when users zoom in or out, or when the window is resized.

This layer is a must-have when creating a PDF viewer as it serves as the foundation that glues all other layers together.

How It Works

• The Structural Layer is typically implemented by a container element (<div>) that wraps all other layers.

• Maintains consistent positioning among layers so they don’t drift apart during zooms or scrolls.

• Acts as the foundation that ties everything together, so your PDF viewer remains cohesive.

Use Cases

• Ensure a consistent user experience across different screen sizes and resolutions.

• Enable smooth zooming by scaling all layers proportionally.

• Centralize navigation and layout logic (e.g. controlling how the viewer scrolls from one page to another.)

In our code examples, the <div ref="pdfLayersWrapper" class="pdf__layers"> element serves as the Structural Layer, wrapping for other layers:

<div ref="pdfLayersWrapper" class="pdf__layers">
  <div class="pdf__canvas-layer">
    <canvas ref="canvasLayer" />
  </div>
  <div ref="textLayer" class="pdf__text-layer"></div>
  <div ref="annotationLayer" class="pdf__annotation-layer"></div>
</div>

Why is this important?

• The Structural Layer wrapper ensures the Canvas, Text, and Annotation Layers all stay in sync, even when you zoom or flip through pages.

• You can customize the wrapper to handle special behaviors like lazy-loading pages, scroll snapping and other performance optimizations.

How Layers Work Together

Here’s how all four layers in PDF.js work together in harmony:

1. Rendering Process:
   Each page is first drawn onto the Canvas Layer (visual content). Next, the Text Layer is layered on top to enable selection and searching. Finally, the Annotation Layer is placed at the very top, providing interactive elements like links and form fields.

2. Interactivity:
   The Annotation Layer handles user events (like clicking on links or typing into form fields), while the Text Layer ensures text can be highlighted, copied, or searched.

3. PDF Viewer:
   The Structural Layer wraps everything up, ensuring that zooming, resizing, and navigation across pages remain consistent. It keeps all layers aligned and responsive, so users get a polished viewing experience.

Conclusion

I’ve used PDF.js in a variety of Vue.js projects, from simple PDF previews to fully interactive document systems, the layered architecture is always at the core.

Why does this matter for you?

• You can optimize each layer for performance or user experience.

• You can customize how your viewer handles interactions, text searches, or forms.

• You’ll find it much easier to maintain or extend your PDF viewer code.

By understanding these layers, you will be able to optimize PDF.js implementations, customize features, and deliver a better user experience. Whether you’re building a simple Vue.js PDF viewer or a complex document management system, leveraging these layers effectively will set your project up for success.

Vue PDF Viewer: The PDF Viewer Built for Vue.js Developers 🚀

If you enjoyed this article, I’d love for you to check out Vue PDF Viewer. It’s a PDF Viewer built from the ground up for Vue and Nuxt applications. Whether you’re just starting out or already running a large-scale app, Vue PDF Viewer got you covered.

Designed with developers in mind, Vue PDF Viewer offers:

• Simple Vue integration to get you up and running fast.

• Advanced customization so you can nail that perfect look and feel.

• Responsive layouts that adapt to any device.

• Developer-friendly APIs for more flexibility.

Your support motivates me to keep creating tools and content for the Vue community. Thank you for checking out Vue PDF Viewer. Happy coding! 🙏

If you have been working with Vue.js for a while, you will know how it hooks you with its simplicity, flexibility, and sheer performance. It has been my go-to framework for years, and I am always on the lookout for tools that make developing with Vue even better. UI component libraries are some of the best tools in that category, they save so much time and help you build beautiful, responsive interfaces without breaking a sweat.

Since Vue 3 officially became the default after Vue 2’s retirement at the end of 2023 (RIP Vue 2 👋), the community has rallied around libraries designed specifically for Vue 3. In this article, I am sharing 6 of the most popular Vue.js UI libraries for 2025—libraries I have loved using or seen gain serious momentum this year.

Whether you are just starting with Vue or deep into building your next big project, these libraries are worth a look. Let’s dive in!

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’d love for you to check Vue PDF Viewer out! Your support means the world and helps me create more awesome content like this. ❤️

1. Vuetify

First up is Vuetify, the OG Material Design-based UI library for Vue.js. It provides over 100 customizable components for creating beautiful and responsive user interfaces. With its modular design, developers can selectively import components, which keeps the bundle size small and improve performance.

Additionally, Vuetify integrates seamlessly with Nuxt 3 and features powerful theming capabilities where developers can customize their application style and match it with their brand.

As of January 2025, Vuetify has over 40,000 stars (from 38,800 stars in 2024) on GitHub and an average weekly downloads count of close to 600,000. (The trend line seems to be growing steadily over the years)

Features:

• Over 80 pre-designed components.

• Support for server-side rendering and single-page applications.

• Extensive documentation and active community support.

Learn more on https://vuetifyjs.com

2. PrimeVue

PrimeVue is a rich set of open-source UI components for Vue applications powered by PrimeTek. It offers over 90 components and 200+ icons making it one of the most comprehensive libraries in the Vue.js community. It's a lightweight library with exclusive Tailwind CSS integration, enabling developers to build complex enterprise-level applications with ease.

PrimeVue also features an intuitive API, allowing developers to quickly customize the components to achieve their desired designs.

As of January 2025, PrimeVue has over 11,000 stars (from 6,800 stars in 2024) on GitHub and an average weekly downloads count of over 280,000 (Huge increase from around 170,000 downloads in 2024).

Features:

• Over 80 versatile components, including charts and data tables.

• Accessibility features compliant with WAI-ARIA.

• Regular updates and a supportive community.

Learn more on https://primevue.org/

3. Element Plus

Element Plus is the successor to Element UI, which was designed exclusively for Vue 2.x. While its predecessor focused on Vue 2.x, Element Plus brings new features, modern tools, and an active community, making it a reliable choice for developers around the globe.

With its strong TypeScript support and an API designed for Vue 3’s Composition API, Element Plus offers a smooth development experience. Its UI style is clean and easy to personalize, making it suitable for everything from small projects to large-scale applications. Its documentation and examples further simplify adoption for new users.

As of January 2025, Element Plus has over 25,000 stars (from 22,600 stars in 2024) on GitHub and an average weekly downloads count of over 230,000.

Features:

• Rich component library with customizable themes.

• Internationalization support.

• Detailed documentation and community-driven development.

Learn more on https://element-plus.org/en-US/

4. Quasar

Quasar is a high-performance Vue framework that enables developers to build responsive websites, mobile apps, and Electron apps using a single codebase. What makes Quasar, founded since 2015, different and standout from other UI component libraries is that Quasar is not only a UI component library but an entire framework.

Quasar's UI Components feature 70 high performance customizable Material Design components and icons of various styles (bootstrap, material, fontawesome and many more). The documentation is detailed and well thought-out. The library also has pre-built features including animations and functions to handle dates and times.

As of January 2025, Quasar has over 26,000 stars (from 25,000 stars in 2024) on GitHub and an average weekly downloads count of over 150,000.

Features:

• Supports multiple platforms (SPA, SSR, PWA, Mobile, and Desktop).

• Comprehensive theming and customization options.

• Built-in support for internationalization.

Learn more on https://quasar.dev/

5. Radix Vue

Radix Vue is a headless component library crafted specifically for Vue.js, offering developers an accessibility-first approach to building user interfaces. Adapted from the popular Radix UI, it provides a robust set of highly customizable components that integrate seamlessly with Vue 3 applications.

The library prioritizes WAI-ARIA compliance, ensuring all components, such as dropdown menus, sliders, and modals, are fully accessible out of the box. Radix Vue’s headless architecture allows developers to implement their unique styling and behavior without being tied to a specific design system, making it a versatile choice for projects of any scale.

As of January 2025, Radix Vue continues to grow in popularity, with a thriving GitHub community and over 130,000 weekly downloads.

Features:

• Fully accessible components built with WAI-ARIA standards for inclusivity out of the box.

• Headless architecture, allowing complete customization of styles and behavior to fit any design system.

• Modular and lightweight, optimized for seamless integration into Vue 3 applications.

Learn more on https://www.radix-vue.com/

6. Ant Design Vue

Ant Design Vue (Antdv) brings the power of the Ant Design ecosystem to Vue.js, offering a polished and professional UI library. Originally developed for React by a team at Alibaba, its Vue implementation has carved out its own space, earning a reputation for its extensive features and developer-friendly design.

Antdv provides a wide array of components, from complex data visualization tools to advanced forms and tree structures. Its focus on scalability and flexibility makes it a strong contender for both small projects and enterprise-grade applications. While the sheer number of features can feel overwhelming at first, the clear documentation and consistent design system make it easy to master.

As of January 2025, Ant Design Vue has over 20,500 stars (from 19,300 stars in 2024) on GitHub and an average weekly downloads count of over 90,000.

Features:

• Comprehensive component library with consistent design language.

• Customizable themes and styles.

• Strong community support and regular updates.

Learn more on https://antdv.com/

Special Mention: Nuxt UI

Nuxt UI is a UI framework built by the Nuxt team that offers a library of components specifically designed for seamless integration with Nuxt.js projects. It ensures developers have a fast, reliable, and optimized experience when crafting modern web applications.

The library includes a curated selection of lightweight and highly customizable components that prioritize performance and developer productivity. Its components are designed to work out of the box with Nuxt’s powerful features, such as server-side rendering (SSR) and static site generation (SSG), making it an excellent choice for creating scalable and responsive applications.

As of January 2025, Nuxt UI is gaining traction in the Vue.js community, with a rapidly growing GitHub presence and over 460,000 weekly downloads. It’s quickly becoming a go-to solution for those seeking a streamlined and efficient component library tailored for Nuxt.js.

Features:

• Optimized components tailored for seamless integration with Nuxt’s SSR and SSG capabilities.

• Lightweight and customizable, designed to enhance performance without sacrificing flexibility.

• Backed by the Nuxt team, ensuring consistent updates, detailed documentation, and community support.

Learn more on https://ui.nuxt.com/

Conclusion

The Vue.js ecosystem continues to thrive in 2025, offering developers a wide range of UI component libraries to meet every need, from comprehensive frameworks to lightweight, customizable solutions. Whether you’re building a simple personal project or a complex enterprise application, there’s a library perfectly suited for your needs.

Each of the libraries brings something unique to the table. To understand which one aligns with your project specific requirements, workflow or design preferences, diving in to explore what each has to offer is probably the best option. 🚀

Vue PDF Viewer: The PDF Viewer Built for Vue.js Developers 🚀

If you enjoyed this article, I encourage you to check out Vue PDF Viewer. Designed specifically for Vue.js applications (small to large), it’s packed with features like easy Vue integration, advanced customization options, responsive layouts, and more. With our developer-friendly APIs and quick-start toolkit, you’ll have a fully functional PDF viewer integrated into your Vue project in no time.

Your support inspires me to create even more valuable content for the Vue community. Thank you for considering Vue PDF Viewer, and happy coding! 🙏

Choosing a PDF viewer for a Vue.js application depends on your project’s needs. Here’s a quick breakdown of five options to consider:

• PDF.js (Open Source): Reliable, no-frills viewing for simple applications.

• vue-pdf (Open Source): Lightweight wrapper for PDF.js, built for Vue.

• Nutrient (Paid): Feature-rich and enterprise-ready, ideal for complex needs.

• Vue PDF Viewer (Paid): Customizable and powerful, built for Vue.

• PDF.js Express (Hybrid): Start with free basics, with optional premium add-ons.

In this article, I'll be comparing five popular PDF libraries for Vue.js. Each library has its strengths and weaknesses, and my goal is to help you pick the best one for your project’s unique needs.

Disclaimer: I’m part of the Vue PDF Viewer team.

Importance of a Reliable PDF Viewer

In any Vue.js application where document viewing is essential, a reliable PDF viewer can make all the difference. Whether you’re building a business dashboard, an educational platform, or a document management system, the right PDF viewer streamlines development and enhances the user experience.

Key Criteria for Choosing a PDF Viewer in Vue.js

When selecting a PDF viewer, a few critical factors can determine whether it will fit your project needs:

• Performance: Fast loading and smooth rendering, especially for large PDFs, are essential.

• Ease of Integration: Libraries that integrate easily into Vue projects save time and simplify maintenance.

• Customization: The ability to style, extend, and configure is important for aligning with specific requirements.

• Community & Support: Documentation and community resources make troubleshooting easier and enhance long-term viability.

With these in mind, let’s explore the top options!

Open Source PDF Viewers

1. PDF.js

PDF.js is a well-known open-source JavaScript library created by Mozilla for rendering PDFs directly in the browser. The library allows developers to display PDF documents without relying on external plugins or native applications. PDF.js renders PDFs by converting each page into HTML5 canvas elements, ensuring that the content is viewable directly in the browser.

Developers who need a simple, cost-effective solution for displaying PDFs in Vue applications often use PDF.js as a base library. Because it’s a standalone JavaScript library, it’s compatible across multiple frameworks. However, it’s not built specifically for Vue, so Vue developers may need to use wrappers or custom integration to make the most of it.

Strengths:

• Large, active community and extensive documentation.

• Free to use, with a simple API that allows basic PDF rendering.

• Actively maintained, so updates and support are consistent.

Limitations:

• Not specifically designed for Vue; additional setup or wrappers like vue-pdf may be required for integration.

• Limited customization, so advanced functionality (e.g., annotations) requires additional coding.

Best Suited For: Simple applications where basic PDF rendering is suffices. While customization is possible, integrating advanced features with Vue.js requires extensive effort as the library is not designed specifically for the framework.

2. vue-pdf

Vue-pdf is a lightweight wrapper around PDF.js, specifically tailored for Vue applications. While PDF.js itself provides a core PDF rendering engine, vue-pdf simplifies the integration process for Vue developers, making it easier to render PDFs without writing extensive code. By using vue-pdf, Vue developers can enjoy the benefits of PDF.js without needing to manage the complex JavaScript integration manually.

Vue-pdf is ideal for applications that require basic PDF display but don’t need extensive functionality like annotations or form filling. It’s popular in small projects and MVPs where ease of use and quick implementation are prioritized.

Strengths:

• Vue compatibility out-of-the-box, which simplifies integration.

• Free and open-source, with a straightforward API.

• Great for smaller projects and quick prototyping.

Limitations:

• Limited advanced features, so it’s best suited for basic viewing.

• Minimal control over rendering or layout; not ideal for highly customized projects.

Best Suited For: Lightweight applications with straightforward PDF display needs without default layout. Vue-pdf is widely used in the Vue.js community, but be aware that the library has not been updated in over 3 years, which may lead to potential security and compatibility concerns.

Paid PDF Viewers

3. Nutrient (formerly PSPDFKit)

Nutrient is a premium, enterprise-grade PDF SDK designed to meet the needs of complex applications with advanced PDF requirements. This SDK goes beyond basic PDF viewing, offering interactive features like annotations, form filling, and even document editing. Built with scalability and customization in mind, Nutrient is often chosen by large-scale applications that prioritize security, stability, and extensive functionality.

While Nutrient is not designed specifically for Vue, it can be integrated into Vue applications with some customization. It’s ideal for organizations that need robust PDF features and are willing to invest in a paid solution that comes with dedicated support and a rich feature set.

Strengths:

• Feature-rich, with support for annotations, editing, search, and form filling.

• Optimized for large-scale applications, handling complex PDFs efficiently.

• Excellent customer support and thorough documentation.

Limitations:

• High cost, which may be a factor for smaller teams or budget-restricted projects.

• Integration with Vue may require extensive customization and configuration.

Best Suited For: Enterprise applications that demand robust, feature-rich PDF functionality such as annotation and editing. Nutrient is ideal for large-scale projects where security, performance, and dedicated support are priorities. However, its high cost and the need for extensive Vue-specific customization may make it less suitable for smaller teams or simpler projects.

4. Vue PDF Viewer

Vue PDF Viewer is a Vue-native solution designed specifically for Vue.js applications. Unlike generic libraries, it integrates seamlessly with Vue projects, offering features that cater to both simple and complex PDF requirements. Its native compatibility ensures that developers can focus more on building their applications and less on managing integration challenges.

Vue PDF Viewer stands out for its ease of use, performance, and the level of customization it offers. It’s particularly suited for projects that demand robust PDF features, such as theme customization, responsive design, and advanced interaction capabilities like annotations.

Strengths:

• Easy to integrate, with Vue-specific functions or methods since it’s Vue-native.

• Optimized for quick loading and smooth rendering to handle large PDF files.

• Adaptable to any project’s design and functional needs with various APIs to leverage or customize from.

• Ensures a seamless experience on both desktop and mobile devices.

Limitations:

• Some advanced enterprise-grade features, such as built-in document editing, may not be available.

• While optimized for modern Vue.js frameworks, it is not compatible with older Vue versions (i.e., Vue 2).

Best Suited For: Vue PDF Viewer is perfect for Vue.js applications requiring a PDF viewer built specifically for Vue. It provides a powerful, native solution with flexibility, high performance, and extensive customization options, making it ideal for projects that prioritize responsive design and seamless user experiences.

Hybrid PDF Viewer

5. PDF.js Express

PDF.js Express offers a unique hybrid model for teams who want flexibility in scaling PDF capabilities. Based on PDF.js, it provides a free version with basic features and the option to unlock premium functionality through paid upgrades. This model is ideal for projects that may need simple viewing at first but might require additional features like annotations, text search, and form filling as they grow.

PDF.js Express is compatible with Vue and is easy to set up, making it accessible to both small projects and larger applications. The option to scale up as needed gives developers flexibility in budgeting and feature selection, allowing projects to remain adaptable.

Strengths:

• Vue-compatible and easy to integrate, with a streamlined setup for quick PDF viewing implementation.

• Provides a range of premium features (annotations, form filling, text search) as optional upgrades, which allows developers to start small and add features as the project grows.

• Strong documentation and support for both free and premium features, making it a developer-friendly option with a low entry cost.

Limitations:

• Free version is limited in functionality; advanced features require a paid license.

• For applications needing high customization or many features, a full SDK like Nutrient or Apryse may be a better choice.

• Integration with Vue may require extensive customization since the UI source code is based on React.

Best Suited For: Projects starting with free features and scaling to premium capabilities like annotations and form filling. It’s best suited for applications with straightforward PDF needs or projects that can accommodate some customization to integrate more advanced functionality over time.

Honorable Mentions

Apryse (formerly PDFTron) is a paid PDF SDK that provides advanced PDF processing capabilities for applications that require more than just viewing. Known for its support of various document types, including Word, Excel, and PowerPoint, Apryse is a versatile SDK that fits well in document-heavy applications. Apryse offers extensive manipulation options, including document redaction, digital signatures, and text extraction, making it a go-to for industries with strict document handling requirements, such as finance, healthcare, and legal.

Apryse is also the parent company of PDF.js Express, which offers a hybrid model for scaling PDF capabilities. Like Nutrient, Apryse isn’t Vue-native, but it can be incorporated into Vue projects with some setup. Its comprehensive functionality and emphasis on security make it suitable for projects with high compliance standards.

Best Suited For: Enterprise applications needing advanced PDF and multi-format handling.

Table Comparison

Conclusion and Recommendation

If your projects are relatively small with simple PDF viewing needs, PDF.js should suffice. On the other hand, if you require advanced features like annotation and edit support or customization in Vue.js, Nutrient and Vue PDF Viewer are the best options respectively. PDF.js Express strikes a good balance between flexibility and scalability, making it a strong choice for projects with evolving requirements or variable budgets. Carefully evaluate your project’s requirements and pick the right library for your development process.

Vue PDF Viewer: The PDF Viewer Built for Vue.js Developers 🚀

If you enjoyed this article, I encourage you to check out Vue PDF Viewer. Designed specifically for Vue.js applications (small to large), it’s packed with features like seamless Vue integration, advanced customization options, responsive layouts, and more. With our developer-friendly APIs and quick-start toolkit, you’ll have a fully functional PDF viewer integrated into your Vue project in no time.

Your support keeps me motivated to share more insights and build tools for the developer community. Thank you in advance! 🙏

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! 🙏

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:

1. 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.

2. 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.

3. 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.

4. 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:

1. Install Vue.js and create a new Vue project using the Vite.

2. Add an iFrame element to your Vue component template.

3. 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:

1. Create a link or button element in your Vue component template.

2. 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:

1. Install the PDF.js library using a script tag.

2. Create a Vue component to display the PDF viewer

3. 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:

1. Install the vue3-pdf-app package using npm or yarn

2. 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.

1. 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.

2. 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.

3. 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.

4. User-Friendly Technical Doc: Get started quickly with our starter toolkit. The documentation includes clear instructions, code examples, and extensive API references.

5. 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! 🙏

Vue.js, a JavaScript framework, has been gaining a lot of attention in recent years due to its simplicity, flexibility, and performance. Also, User Interface (UI) component libraries have become an essential aspect of web development, providing a fast and convenient way to build beautiful and responsive user interfaces.

Vue 3 has become the default choice to build modern applications since Vue 2 reaching its end of life on December 31, 2023. The need for UI component libraries designed specifically for Vue 3 has risen. In this article, we will take a look at the six most popular Vue.js UI component libraries for 2024, categorized based on their popularity within English and Chinese-speaking communities.

I decided to categorize this way because of massive popularity of Vue.js in China according to an interview with Evan You, the creator of Vue.js, who was born in China and grew up in a city near Shanghai.

Moreover, Vue has well written documents in Chinese. As teams from big companies in China such as Alibaba, Tencent and Baidu started using Vue.js, all these factors may have contributed to its popularity in the country.

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 ❤️‍🔥

English focused community

1. Vuetify

Vuetify is a popular Vue.js UI component library based on Material Design specifications. It provides over 100 customizable components for creating beautiful and responsive user interfaces. With its modular design, developers can selectively import components, which keeps the bundle size small and improve performance.

Additionally, Vuetify integrates seamlessly with Nuxt 3 and features powerful theming capabilities where developers can customize their application style and match it with their brand.

As of February 2024, Vuetify has over 38,800 stars (from 37,900 stars in 2023) on GitHub and an average weekly downloads count of close to 500,000. (The trend line seems to be growing steadily over the years)

Learn more on https://vuetifyjs.com

Remark: There are still a couple of Vuetify 2 components including calendar, overflow-btn, speed-dial, time-picker and treeview that are not yet available in Vuetify 3. According to official Vuetify guide, they will be released by Vuetify Labs when development is completed.

2. Quasar

Quasar's UI Components feature 70 high performance customizable Material Design components and icons of various styles (bootstrap, material, fontawesome and many more). The documentation is detailed and well thought-out. The library also has pre-built features including animations and functions to handle dates and times.

What makes Quasar, founded since 2015, different and standout from other UI component libraries is that Quasar is not only a UI component library but a dynamic Vue framework. You can develop Vue.js desktop, web and mobile applications with a single codebase. As the saying goes, write once and use everywhere.

As of February 2024, Quasar has over 25,000 stars (from 24,200 stars in 2023) on GitHub and an average weekly downloads count of over 100,000.

Learn more on https://quasar.dev/

3. PrimeVue

PrimeVue is a sleek Vue.js component library that offers over 90 components and 200+ icons making it one of the most comprehensive libraries in the Vue.js community. It's a lightweight library with exclusive Tailwind CSS integration, enabling developers to build complex enterprise-level applications with ease.

PrimeVue is powered by PrimeTek, which serves millions of developers of Fortune 500 companies such as Intel, Nvidia and American Express, lending it massive credibility in the enterprise space.

PrimeVue also features an intuitive API, allowing developers to quickly customize the components to achieve their desired designs.

As of February 2024, PrimeVue has over 6,800 stars (from 4,300 stars in 2023) on GitHub and an average weekly downloads count of over 170,000 (Huge increase from around 100,000 downloads in September 2023).

Learn more on https://primevue.org/

Chinese focused community

1. Element Plus

Element Plus is a community developed project born from Element UI which supports only Vue 2.X. Due to its predecessor's popularity, it has naturally gained a lot of attention by developers, especially those in China.

A TypeScript-based library with a complete type definition, Element Plus is not based on Material Design and has its own distinct UI style which can modified quite easily. Element Plus simplifies component utilization, making the code more maintainable and readable with Vue 3's Composition API.

As of February 2024, Element Plus has over 22,600 stars (from 21,300 stars in 2023) on GitHub and an average weekly downloads count of over 200,000.

Learn more on https://element-plus.org/en-US/

2. Ant Design Vue

Ant Design Vue (Antdv) is a popular TypeScript-based UI component library based off Ant Design, a library that was developed for React and was originally created by a team from Alibaba. But it has gained traction in the Vue.js community for its ease of use and its rich feature set. It offers a comprehensive range of components like tree structures, forms, and data visualization components.

Similar to Element Plus, Antdv has its own unique UI style. Although it may initially seem daunting to explore its huge sets of UI components and features, once you get the hang of it, Antdv can be a very powerful UI component library for projects of all sizes.

As of February 2024, Ant Design Vue has over 19,300 stars (from 18,600 stars in 2023) on GitHub and an average weekly downloads count of over 80,000.

Learn more on https://antdv.com/

3. Naive UI

Naive UI is a TypeScript-based UI component library developed by TuSimple, a Chinese autonomous truck company based in California. It has been mentioned by Evan You, the creator of Vue.js, in his Weibo blog back in 2021.

Naive UI consists of over 90 components that can be imported to use in your project. Most impressively, all 90+ components can be treeshaken. This means that the component can be imported individually into your application without waste. Documentation of Naive UI is also well documented and easy to follow.

As of February 2024, Naive UI has over 14,800 stars on GitHub and an average weekly downloads count of over 30,000.

Learn more on https://github.com/tusen-ai/naive-ui

Special Mention: Nut UI

Nut UI is a mobile UI component library that is developed by the Chinese e-commerce giant, JD.com (also known as Jingdong). It provides a JD-style mobile UI component library that is used by JD in production.

Nut UI features high quality UI components that are well tested (unit test coverage more than 80%). It has clear documentation and supports TypeScript. Furthermore, it provides Sketch design resources for designers to easily create design screens.

As of February 2024, Nut UI has over 5,700 stars on GitHub and an average weekly downloads count of over 3,000.

Learn more on https://github.com/jdf2e/nutui/blob/v4/README_EN.md

Conclusion

In conclusion, Vue.js has gained popularity due to its flexibility, simplicity, and performance. The availability of different UI component libraries has made it easier for developers to build complex and elegant applications at speed with ease. Whether you're building large complex applications or small, highly performant ones, there is always the right Vue.js UI component library suitable for your needs.

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

If you feel like this article helped you, please check out Vue PDF Viewer. You can customize the PDF viewer component to your theme, add locales, configure panel and more. Each function has TS and JS codes, unit tests and interactive demos. With our starter kits, you can start rendering the Vue PDF Viewer in minutes.

It would encourage me to continue creating even more contents. Thank you in advance! 🙏

According to Jetbrains' State of Developer Ecosystem survey from 2017-2022, Vue.js has grown to become the 2nd most popular framework used by Javascript developers. Vue.js is therefore a great choice to learn for a frontend Javascript framework.

If this is your first JavaScript framework, you may be feeling nervous or uncertain. So to make this journey a little bit easier, I have curated 20+ relevant articles grouped by topics to help Vue.js beginners learn the core concepts and features of Vue.js. Here are the topics to follow along:

• Introduction to Vue 3

• Options API and Composition API

• Vue Router

• Pinia Fundamentals

• Typescript

• Unit Testing

Note: This article assumes that you have prior knowledge of JavaScript.

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 ❤️‍🔥

Introduction to Vue 3:

Before you start coding in Vue, it is essential to gain a solid grasp of its fundamental principles and key concepts. This knowledge will grant you a deeper understanding and lay a robust groundwork for your journey into Vue development.

VueJS Part 1 to Part 5

This 5-part series of short articles is a good read for any beginner looking to learn Vue 3. It covers topics from the very basics, from Hello World to directives to conditional rendering and events handling.

• VueJS Part 1: Intro to VueJS

• VueJS Part 2: Hello Vue and displaying values in HTML

• VueJS part 3: Vue directives and conditional rendering

• VueJS part 4: Rendering in loop

• VueJS part 5: Handling events

Be sure to check out all 5 parts to gain a good understanding on Vue 🎉

A Beginner’s Guide to Vue 3

This article dated back in 2021 showcases examples that uses Vue CLI of an older version. However, the article still provides a great step-by-step guide in creating a simple Vue 3 app and getting to know the basic functionalities of Vue.js.

Vue Made Easy: Getting Started with Vue

This article is part of a larger 4 parts series, and it offers a comprehensive beginner-friendly guide to getting started with Vue.js. It's easy to follow along, thanks to detailed explanations and code examples.

Vue.js for Beginners #1

If you are looking for a clear guide with all you need to know to start developing in Vue 3, be sure to check out this 2 parts series written by Eric Hu.

• Vue.js for Beginners #1

• Vue.js for Beginners #2

In Part 1, you will learn the very basics from installation to methods, interpolations and directives. You will also get hands on in building an app. Continue on to Part 2 to find out about event handling, forms and more!

Best Practices for Writing Vue.js

These best practices are like a helpful guide for beginners that are starting out on Vue. They ensure your code is clean and easy to understand so that you'll not only write better code but also gain confidence as a Vue.js developer.

Bonus: Vue Developer Roadmap

This cool looking roadmap provides a great guideline to becoming a Vue Developer. Clicking on each node will display links to useful resources for the related topic. After you are done with Vue, you can even proceed on to the Frontend developer or other roadmaps to see what you have missed on your learning journey!:sparkles:

Options API and Composition API:

The Options API is a traditional way of building Vue components that has been around since 2013. However, since Composition API's release in Vue 3, it has been the preferred method that offers a more flexible and intuitive way to organize and reuse code. It allows developers to encapsulate logic into reusable functions called "composition functions."

Options API vs. Composition API

If you have some prior knowledge of Vue 2, chances are you may be wondering if you should use Options API. This article starts by explaining the key concepts of the Options API, such as data, methods, and lifecycle hooks. Then, it introduces the Composition API, highlighting its simplicity and reduced code size.

How to use Composition API the right way

This article further dives into the usefulness of using Composition API and the issues with Options API. It explains how to use the Composition API properly and the benefits.

Why I Love Vue 3's Composition API

In this article, Michael Hoffman makes a clear comparison between Options API and Composition API by building the same application with each method.
Jump in if you want to further understand why you should be using Composition API :sunglasses:

Refactoring a Component from Vue 2 Options API to Vue 3 Composition API

To truly understand the Composition API, we have to first look back and understand how things work in Vue 2. In this article, it explains Options API from Vue 2 and how it evolves in Vue 3 and why Composition API should be the preferred method.
Great read to understand Composition API from a different perspective.

Vue Router

Vue Router is a routing library for Vue.js that enables the creation of single-page applications. It allows developers to define routes, handle navigation, and load different components based on the current route.

How to Use Vue Router: A Complete Tutorial

Look no further if you are looking to learn routing in Vue 3. This article covers the basics from Vue Router Fundamentals to Dynamic routing and Lazy Loading.
Good article to read and save for future reference!

How To Navigate Between Views with Vue Router

Time to get hands on again! This article explains the need for Vue router and features a step-by-step guide from to build a Vue 3 application and route it with Vue router.
This is part of a 9 parts series with basic and advanced topics. Be sure to check them out as well

Pinia Fundamentals

Pinia is a state management library specifically designed for Vue.js 3. It provides a minimalistic approach to managing application state by leveraging the new features of Vue 3, including the Composition API.

Easy State Management in Vue 3 Using Pinia

This short article showcases the key aspects of Pinia, the superhero of state management in Vue 3. Understand the fundamentals of Pinia and say goodbye to the confusion of passing data around :rocket:

Advantages of Pinia vs Vuex

If you are working on state management, chances are you may be wondering to use Pinia or Vuex. And although Pinia is the recommended library for Vue.js state management, it helps to understand Vuex which is still used in Vue 3.
You'll find detailed Q&A styled explanations to your questions here!

How To Handle State Management in Vue Using Pinia

This post provides a high-level overview of handling state management in a Vue application with Pinia. It elaborates on state management and dive deeper with code examples.

TypeScript:

Vue.js 3 introduces enhanced support for TypeScript, a statically typed superset of JavaScript. TypeScript with Vue 3 improves code maintainability, type checking, and error prevention.

Learn TypeScript Basics in this Beginner's Guide

If you are new to TypeScript, this article is a good place to start. Although it does not relate to Vue.js, it contains information to get you started with TypeScript. It guides you through what is TypeScript, the key concepts and also all the cool features of using TypeScript :sunglasses:
Be sure also to check out the TypeScript documentation.

Why Use TypeScript with Vue.js?

Need more convincing to start using TypeScript with Vue 3? Check this article out for more insights on using TypeScript in your Vue.js project.

Getting started with Vue.js3 and Typescript: A Beginners Guide

Now that you know TypeScript, it's time to dive in. Learn how to set up your project, create components, and effortlessly bind data for dynamic user interfaces 🌟

Unit Testing:

Unit testing plays a crucial role in ensuring the quality and reliability of Vue.js applications. Unit testing can be implemented via popular testing frameworks and libraries such as Jest, Vite and Vue Test Utils.

Testing Vue.js Components with Vue Test Utils

Vue 3 provides an official set of testing utilities known as Vue Test Utils. This article walks you through using Vue Test Utils and Jest to write unit tests. It provides examples to test your Vue.js codes and components such as forms and emitted events.

Getting Started with Vitest

If you are already running your Vue.js projects with Vite, a build tool developed by Evan You, consider using the blazing fast Vitest for your tests instead :fire: Get started by following the installation instructions and demos in this article.

Knowing What To Test - Vue Component Unit Testing

Learning the tools to unit testing is important, however it is just as crucial to know what to test. As a beginner, you may feel lost at first which components to test. Understanding this will save you time and effort in testing only the key components and business logics.
Although the codes in this article is written in Vue 2, it is still a good read that provides valuable insights to unit testing.

Conclusion

In the world of Vue.js 3, we've rounded up 21 articles that are pretty handy for beginners. These articles cover a bunch of stuff, from the basics of Vue.js to Composition API, Vue Router, Pinia, TypeScript, and unit testing. Whether you're just starting out or want to level up your Vue.js skills, these articles have got you covered. Vue.js is becoming more and more popular, so these resources will help you build web apps with ease. Dive into these articles and become a Vue.js whiz at your own pace! 🚀

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

If you feel like this article helped you, please check out Vue-PDF-Viewer. You can customize the PDF viewer component to your theme, add locales, configure panel and more. Each function has TS and JS codes, unit tests and interactive demos. With our starter kits, you can start rendering the Vue-PDF-Viewer in minutes.

It would encourage me to continue creating even more contents. Thank you in advance! 🙏

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:

1. 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.

2. 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.

3. 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:

1. 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.

2. 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.

3. 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 🙏🔥

Vue.js, a JavaScript framework, has been gaining a lot of attention in recent years due to its simplicity, flexibility, and performance. Also, User Interface (UI) component libraries have become an essential aspect of web development, providing a fast and convenient way to build beautiful and responsive user interfaces.

Vue 3 has become the default choice to build modern applications since Vue 2 reaching its end of life on December 31, 2023. The need for UI component libraries designed specifically for Vue 3 has risen. In this article, we will take a look at the six most popular Vue.js UI component libraries for 2024, categorized based on their popularity within English and Chinese-speaking communities.

I decided to categorize this way because of massive popularity of Vue.js in China according to an interview with Evan You, the creator of Vue.js, who was born in China and grew up in a city near Shanghai.

Moreover, Vue has well written documents in Chinese. As teams from big companies in China such as Alibaba, Tencent and Baidu started using Vue.js, all these factors may have contributed to its popularity in the country.

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 ❤️‍🔥

English focused community

1. Vuetify

Vuetify is a popular Vue.js UI component library based on Material Design specifications. It provides over 100 customizable components for creating beautiful and responsive user interfaces. With its modular design, developers can selectively import components, which keeps the bundle size small and improve performance.

Additionally, Vuetify integrates seamlessly with Nuxt 3 and features powerful theming capabilities where developers can customize their application style and match it with their brand.

As of February 2024, Vuetify has over 38,800 stars (from 37,900 stars in 2023) on GitHub and an average weekly downloads count of close to 500,000. (The trend line seems to be growing steadily over the years)

Learn more on https://vuetifyjs.com

Remark: There are still a couple of Vuetify 2 components including calendar, overflow-btn, speed-dial, time-picker and treeview that are not yet available in Vuetify 3. According to official Vuetify guide, they will be released by Vuetify Labs when development is completed.

2. Quasar

Quasar's UI Components feature 70 high performance customizable Material Design components and icons of various styles (bootstrap, material, fontawesome and many more). The documentation is detailed and well thought-out. The library also has pre-built features including animations and functions to handle dates and times.

What makes Quasar, founded since 2015, different and standout from other UI component libraries is that Quasar is not only a UI component library but a dynamic Vue framework. You can develop Vue.js desktop, web and mobile applications with a single codebase. As the saying goes, write once and use everywhere.

As of February 2024, Quasar has over 25,000 stars (from 24,200 stars in 2023) on GitHub and an average weekly downloads count of over 100,000.

Learn more on https://quasar.dev/

3. PrimeVue

PrimeVue is a sleek Vue.js component library that offers over 90 components and 200+ icons making it one of the most comprehensive libraries in the Vue.js community. It's a lightweight library with exclusive Tailwind CSS integration, enabling developers to build complex enterprise-level applications with ease.

PrimeVue is powered by PrimeTek, which serves millions of developers of Fortune 500 companies such as Intel, Nvidia and American Express, lending it massive credibility in the enterprise space.

PrimeVue also features an intuitive API, allowing developers to quickly customize the components to achieve their desired designs.

As of February 2024, PrimeVue has over 6,800 stars (from 4,300 stars in 2023) on GitHub and an average weekly downloads count of over 170,000 (Huge increase from around 100,000 downloads in September 2023).

Learn more on https://primevue.org/

Chinese focused community

1. Element Plus

Element Plus is a community developed project born from Element UI which supports only Vue 2.X. Due to its predecessor's popularity, it has naturally gained a lot of attention by developers, especially those in China.

A TypeScript-based library with a complete type definition, Element Plus is not based on Material Design and has its own distinct UI style which can modified quite easily. Element Plus simplifies component utilization, making the code more maintainable and readable with Vue 3's Composition API.

As of February 2024, Element Plus has over 22,600 stars (from 21,300 stars in 2023) on GitHub and an average weekly downloads count of over 200,000.

Learn more on https://element-plus.org/en-US/

2. Ant Design Vue

Ant Design Vue (Antdv) is a popular TypeScript-based UI component library based off Ant Design, a library that was developed for React and was originally created by a team from Alibaba. But it has gained traction in the Vue.js community for its ease of use and its rich feature set. It offers a comprehensive range of components like tree structures, forms, and data visualization components.

Similar to Element Plus, Antdv has its own unique UI style. Although it may initially seem daunting to explore its huge sets of UI components and features, once you get the hang of it, Antdv can be a very powerful UI component library for projects of all sizes.

As of February 2024, Ant Design Vue has over 19,300 stars (from 18,600 stars in 2023) on GitHub and an average weekly downloads count of over 80,000.

Learn more on https://antdv.com/

3. Naive UI

Naive UI is a TypeScript-based UI component library developed by TuSimple, a Chinese autonomous truck company based in California. It has been mentioned by Evan You, the creator of Vue.js, in his Weibo blog back in 2021.

Naive UI consists of over 90 components that can be imported to use in your project. Most impressively, all 90+ components can be treeshaken. This means that the component can be imported individually into your application without waste. Documentation of Naive UI is also well documented and easy to follow.

As of February 2024, Naive UI has over 14,800 stars on GitHub and an average weekly downloads count of over 30,000.

Learn more on https://github.com/tusen-ai/naive-ui

Special Mention: Nut UI

Nut UI is a mobile UI component library that is developed by the Chinese e-commerce giant, JD.com (also known as Jingdong). It provides a JD-style mobile UI component library that is used by JD in production.

Nut UI features high quality UI components that are well tested (unit test coverage more than 80%). It has clear documentation and supports TypeScript. Furthermore, it provides Sketch design resources for designers to easily create design screens.

As of February 2024, Nut UI has over 5,700 stars on GitHub and an average weekly downloads count of over 3,000.

Learn more on https://github.com/jdf2e/nutui/blob/v4/README_EN.md

Conclusion

In conclusion, Vue.js has gained popularity due to its flexibility, simplicity, and performance. The availability of different UI component libraries has made it easier for developers to build complex and elegant applications at speed with ease. Whether you're building large complex applications or small, highly performant ones, there is always the right Vue.js UI component library suitable for your needs.

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

If you feel like this article helped you, please check out Vue-PDF-Viewer. You can customize the PDF viewer component to your theme, add locales, configure panel and more. Each function has TS and JS codes, unit tests and interactive demos. With our starter kits, you can start rendering the Vue-PDF-Viewer in minutes.

It would encourage me to continue creating even more contents. Thank you in advance! 🙏

So, I started looking at different methodologies which can provide development flexibility and system maintainability for the projects I’m leading. I choose Atomic Design methodology and want to share why it works for me.

Atomic Design is a methodology for creating design systems that breaks down user interfaces into small, reusable components, namely:

1. Atoms

2. Molecules

3. Organisms

4. Templates

5. Pages

By following a modular approach to design, atomic design helps teams to create consistent, scalable, and maintainable UIs.

In this post, for simplicity, we'll explore how to implement Atomic Design in Vue.js with only HTML. I'll start with the basics of Atomic Design and then demonstrate how to apply its principles in Vue.js.

At the end of the article, you will get a page that consists of a header, a form and a footer. You can use the example here to apply to any UI framework.

You may notice that each component has borders around it. This is intentional so you can identify whether it's an atom, a molecule, or an organism.

Vue-PDF-Viewer: A Versatile and Powerful PDF Solution for Vue.js

Here’s a little background on what I’ve been working on—Vue PDF Viewer. This library makes it easy to render PDF documents right within your Vue or Nuxt applications, allowing users to interact with PDFs directly on your site. With features like theme customization, built-in localization, and responsive design, it’s crafted to offer a flexible and seamless user experience tailored to your project’s needs.

If you find this helpful, I’d love for you to check out Vue PDF Viewer. Your support inspires me to keep creating and improving tools for the developer community!

Anatomy of Atomic Design

Atomic Design consists of five levels that represent the building blocks of UIs. For this example, I have created an inverted tree structure to visualizing how each anatomy is connected.

- Page
 - Full Layout Template
  - Header Organism
    - Logo Atom
    - Search Form Molecule
      - TextBox Atom
      - Button Atom
  - Content Organsim
    - Form Molecule
      - 2x TextBox Atoms
      - Button Atom
  - Footer Organism
    - Copyright Atom
    - Subscribe Form Molecule
      - TextBox Atom
      - Button Atom

1. Atoms

Atoms are the smallest units of UI that cannot be broken down further without losing their meaning. Examples of atoms include icons, buttons, labels, inputs, and typography.

In Vue.js, atoms can be created as reusable components that accept props to customize their appearance and behavior. For this instance, we have a few atoms to prepare for:

• Textbox

  

<template>
<div class="component-wrapper" data-name="textBoxAtom">
  <label>{{ label }}: <input type="text" :placeholder="placeHolder" /></label>
</div>
</template> 

<script>
export default { 
  name: 'TextBoxAtom', 
  props: { 
    label: {
      type: String,
      default: 'labelName'
    }, 
    placeHolder: String, 
  }, 
}; 
</script>
<style scoped>
  input{
      padding: 0.75em 2em;
  }
</style>

• Button

  

<template>
 <div class="component-wrapper" data-name="buttonAtom">
  <button :disabled="disabled"> 
    <slot>Button</slot>
  </button> 
 </div>
</template> 

<script>
export default { 
  name: 'ButtonAtom', 
  props: { 
    type: String, 
    size: String, 
    disabled: Boolean,
  },  
}; 
</script>
<style scoped>
button {
  color: #4fc08d;
}
button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.5em 2em;
}
</style>

• Logo

  

<template>
  <div class="component-wrapper" data-name="logoAtom">
    <img :src="computedImageUrl" alt="logo"/>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 50
    },
    height: {
      type: Number,
      default: 50
    }
  },
  computed: {
    computedImageUrl() {
      return `https://picsum.photos/${this.width}/${this.height}`
    }
  }
};
</script>

For a closer look, you can check out the codes in the Atoms collection.

2. Molecules

Molecules are combinations of two or more atoms that work together to perform a specific function. In Vue.js, molecules can be created by composing atoms as child components within a parent component. Examples of molecules include forms, search bars, navigation menus, and cards.

Referring to the example above, we will need to combine the atoms to create the following molecules:

• Subscribe Form Molecule

  

<template>
  <form class="component-wrapper" data-name="subscribeFormMolecules">
    <TextboxAtom label="Email" />
    &nbsp;
    <ButtonAtom>Subscribe</ButtonAtom>
  </form>
</template>

<script>
import TextboxAtom from "https://codepen.io/9haroon/pen/LYXgdKg.js";
import ButtonAtom from "https://codepen.io/9haroon/pen/BaGqrJg.js";
export default {
  components: { ButtonAtom, TextboxAtom }
};
</script>
<style scoped>
form {
  display: inline-flex;
}
</style>

• Search Form Molecule

  

<template>
  <form class="component-wrapper" data-name="searchFormMolecules">
    <InputAtom label="Search" />
    <ButtonAtom>Search</ButtonAtom>
  </form>
</template>

<script>
import InputAtom from "https://codepen.io/9haroon/pen/LYXgdKg.js";
import ButtonAtom from "https://codepen.io/9haroon/pen/BaGqrJg.js";
export default {
  components: { ButtonAtom, InputAtom }
};
</script>
<style scoped>
form {
  display: inline-flex;
}
</style>

• Form Molecule

  

<template>
  <div class="form-molecule component-wrapper" data-name="formMolecules">
    <div><InputAtom :label="nameLabel" :placeholder="namePlaceholder" /></div>
    <div><InputAtom :label="emailLabel" :placeholder="emailPlaceholder" /></div>
    <p>
      <ButtonAtom :disabled="isSubmitDisabled">
        {{ submitLabel || "Button" }}
      </ButtonAtom>
    </p>
  </div>
</template>

<script>
import InputAtom from "https://codepen.io/9haroon/pen/LYXgdKg.js";
import ButtonAtom from "https://codepen.io/9haroon/pen/BaGqrJg.js";
export default {
  name: "FormMolecule",
  components: {
    InputAtom,
    ButtonAtom
  },
  props: {
    nameLabel: String,
    namePlaceholder: String,
    emailLabel: String,
    emailPlaceholder: String,
    submitLabel: String,
    isSubmitDisabled: Boolean
  }
};
</script>

You can find the codes in the Molecules collection.

3. Organisms

Organisms are combinations of molecules that form distinct sections of a UI, such as headers, footers, sidebars, and content blocks. In Vue.js, organisms can be created by composing molecules as child components within a layout component.

For this exercise, three organisms are needed.

• Header Organism

  

<template>
  <header class="component-wrapper" data-name="headerOrganism">
    <LogoAtom width="60" />
    <SearchFormMoecules />
  </header>
</template>

<script>
import SearchFormMoecules from "https://codepen.io/9haroon/pen/zYMmjqa.js";
import LogoAtom from "https://codepen.io/9haroon/pen/xxQMbeJ.js";
export default {
  components: { SearchFormMoecules, LogoAtom }
};
</script>
<style scoped>
header {
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

• Content Organism

  

<template>
  <div class="page-organism">
    <div class="content-wrapper-title">
      <h1><slot name="title">Here might be a page title</slot></h1>
      <p><slot name="description">Here might be a page description</slot></p>
    </div>
    <slot>...</slot>
    <!--   This might includes some molecules or atoms   -->
  </div>
</template>
<script>
export default {
  name: "ContentOrganism",
  components: {}
};
</script>
<style scoped>
.page-organism {
  padding-top: 50px;
  padding-bottom: 80px;
  box-shadow: inset 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.content-wrapper-title {
  text-align: center;
}
</style>

• Footer Organism

  

<template>
  <footer class="component-wrapper" data-name="footerOrganism">
    <CopyrightAtom />
    <SubscribeFormMoecules />
  </footer>
</template>

<script>
import SubscribeFormMoecules from "https://codepen.io/9haroon/pen/ExOrarL.js";
import LogoAtom from "https://codepen.io/9haroon/pen/xxQMbeJ.js";
import CopyrightAtom from "https://codepen.io/9haroon/pen/gOQqOBj.js";
export default {
  components: { SubscribeFormMoecules, LogoAtom, CopyrightAtom }
};
</script>
<style scoped>
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

Per usual, here's a collection of organisms' codes that I've created.

4. Templates

Templates are the structures that define the layout and composition of pages by specifying the placement and size of organisms within regions, such as headers, footers, and content areas.

In Vue.js, templates can be created as parent components that accept named slots for child components. Applying the 3 organisms to the Templates concept, here is how it could look like.

<template>
  <div class="full-layout-template">
    <HeaderOrganism />
    <ContentOrganism class="content">
      <template #title>
        <slot name="title">default title</slot>
      </template>
      <template #description>
        <slot name="description">default description</slot>
      </template>
      <slot />
    </ContentOrganism>
    <FooterOrganism class="page-footer" />
  </div>
</template>
<script>
import HeaderOrganism from "https://codepen.io/9haroon/pen/WNYaJGR.js";
import ContentOrganism from "https://codepen.io/9haroon/pen/vYQbOeO.js";
import FooterOrganism from "https://codepen.io/9haroon/pen/RwqvPRN.js";
export default {
  name: "FullLayoutTemplate",
  components: {
    HeaderOrganism,
    ContentOrganism,
    FooterOrganism
  }
};
</script>
<style scoped>
.full-layout-template {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
}
.content {
  flex: 1 0 auto;
}
.page-footer {
  flex-shrink: 0;
}
</style>

here is the CodePen's link of the template

5. Pages

Pages are the final presentation of UIs that combine templates with specific content to form complete views. In Atomic Design, pages are like instances of templates that represent unique experiences for users.

In Vue.js, pages can be created by copying a template and replacing its slots with actual content. Although, in this example, I only change the content of Content Organism, you could choose to change all or no content.

<template>
  <FullLayoutTemplate>
    <template #title>{{ title }}</template>
    <template #description>{{ description }}</template>
    <div class="fixed-width">
      <FormMolecule nameLabel="Name" emailLabel="Email" submitLabel="Save" />
    </div>
  </FullLayoutTemplate>
</template>
<script>
import FullLayoutTemplate from "https://codepen.io/9haroon/pen/GRwzpxx.js";
import FormMolecule from "https://codepen.io/9haroon/pen/PoxyRMo.js";
export default {
  name: "HomePage",
  components: {
    FullLayoutTemplate,
    FormMolecule
  },
  data() {
    return {
      title: "Welcome to my example",
      description: "This is an example of Atomic Design in Vue.js",
      copyright: "Copyright © 2023"
    };
  }
};
</script>
<style scoped>
* {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.fixed-width {
  max-width: 350px;
  margin: 0 auto;
}
</style>

here is the CodePen's link of the page

Benefits of Atomic Design in Vue.js

By using Atomic Design in Vue.js, you can achieve several benefits, such as:

• Consistency: By creating reusable components, you ensure that your UIs look and behave consistently across all pages.

• Scalability: By breaking down UIs into small pieces, you can easily add, remove, or update components without affecting other parts of the system.

• Maintainability: By organizing components into folders and files, you can easily find, edit, or debug them in isolation from other parts of the system.

• Reusability: By creating standalone components, you can reuse them in other projects or share them with the community, thus saving time and effort.

Atomic Design is a powerful methodology that can help you design better UIs in Vue.js. By following its principles, you can create reusable, modular, and scalable components that make your code more maintainable and your users more satisfied. So, go ahead, give it a try, and let me know how it worked for you!

Vue PDF Viewer: A Complete PDF Solution for Vue.js

If you’re looking for a powerful, flexible solution for rendering PDFs directly in your Vue or Nuxt applications, Vue PDF Viewer is the tool for you. Offering a wide array of features—like theme customization, localization support, and responsive layouts—it’s built to handle a range of project requirements while delivering a seamless, user-friendly experience.

If this sounds useful to you, feel free to explore Vue PDF Viewer and see how it can enhance your next project. It would mean the world and encourage me to create more content.

Thank you in advance! 🙏