DEV Community: Vue PDF Viewer

🚀 6 Open-Source PDF Viewer and Annotation libraries every Vue developers should know [2025] ✨

Anson Ch — Tue, 09 Sep 2025 10:03:53 +0000

PDF Viewer and annotation features have become standard in modern web apps. Whether you're building dashboards, admin panels, or document platforms, users expect smooth PDF reading experience and the ability to mark up files with comments, highlights, or signature, all without ever leaving your site.

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:

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.”
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.
Community and Documentation - A powerful library is only as good as its documentation and community. Scan GitHub stars and check for active issues.
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 🙏

🌟 Vue 3 UI Libraries: 6 Most Popular Picks for 2025 🚀

Anson Ch — Tue, 04 Feb 2025 08:00:00 +0000

Edit: Back in 2024, I shared a list of the "⚡️Top 6 Vue.js UI Libraries (Vue 3) Trending in 2024 🔥". Now in 2025 I couldn’t resist revisiting this topic to see what has changed and which libraries are still making waves 🎉

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

📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔

Anson Ch — Tue, 10 Dec 2024 11:13:35 +0000

PDF is a common document that is used digitally everywhere. I have been involved in a few Vue projects that require PDF display. For simple viewing, native browser function or iframe solutions should suffice. For more advanced rendering and interactions, you will need dedicated libraries that offer features like theme customization, responsive layouts and reliable support.

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

Library	Customizable with Vue.js	PROS	CONS
Vue PDF Viewer	High	Native Vue.js integration, highly customizable	Lacks document editing, not supported for older Vue versions (i.e., Vue 2)
PDF.js	Low	Free, large community, cross-framework	Not Vue-native, limited advanced features
vue-pdf	High	Easy Vue integration, free and lightweight	Limited features, outdated (3+ years)
Nutrient	Moderate	Feature-rich, enterprise-ready	Expensive, requires Vue customization
PDF.js Express	Low	Flexible, optional premium features	Limited free features, React-based UI

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

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

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

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

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

Fang Tanbamrung for Vue PDF Viewer ・ Mar 19 '24

#vue #frontend #javascript #webdev

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

Why Vue PDF Viewer?

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

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

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

Displaying a PDF Viewer Component

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

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

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

Step 1: Adding the Library

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

bun add @vue-pdf-viewer/viewer

Remark: You can use yarn, npm or pnpm.

Step 2: Importing the Component

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

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

Step 3: Render the Component

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

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

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

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

Common Use Cases

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

Change Themes to Match Your Site

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

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

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

Adjust Web Responsive Breakpoint

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

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

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

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

Customize Any Icon

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

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

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

Conclusion

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

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

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

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

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

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

What is so important about PDF?

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

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

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

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

Method 1: iFrame

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

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

Here is the link to the code sample.

Using iFrame has its pros and cons:

Pros

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

Cons

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

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

Method 2: PDF with New Tab

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

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

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

Pros

Simple implementation
Direct interaction with the PDF content

Cons

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

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

Method 3: PDF.js

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

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

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

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

Pros

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

Cons

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

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

Method 4: vue3-pdf-app

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

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

Please find the demo here.

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

Pros

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

Cons

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

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

Comparison Summary

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

Is there a Better Solution?

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

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

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

⚡️Top 6 Vue.js UI Libraries (Vue 3) Trending in 2024 🔥

Anson Ch — Tue, 12 Mar 2024 12:00:00 +0000

Edit: Previously I wrote about the "6 Most Popular Vue.js UI Libraries (Vue 3) in 2023". As we are now in 2024, I have revisited the different libraries and updated them for the current year 🎉

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

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

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

20++ Essential Articles for Vue.js (Vue 3) Beginner

Anson Ch — Fri, 29 Sep 2023 10:12:38 +0000

Vue.js is a progressive JavaScript framework used for building user interfaces. It emphasizes simplicity and reactivity, making it a popular choice for web development. Vue adoption rate has been growing steadily over the past few years, with millions of weekly npm downloads at this point of writing 😱

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.

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.

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

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 😎

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 🚀

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 😎

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

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

⚡️6 Most Popular Vue.js UI Libraries (Vue 3) in 2023 🔥

Anson Ch — Thu, 14 Sep 2023 12:30:00 +0000

With Vue 2 reaching its end of life on December 31, 2023 😱, Vue 3 has become the default choice to build modern applications. 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 2023, categorized based on their popularity within English and Chinese-speaking communities.

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

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 seamless with Nuxt 3 and features powerful theming capabilities where developers can customize their application style and match it with their brand.

As of September 2023, Vuetify has over 37,900 stars on GitHub and an average weekly downloads count of over 400,000.

Learn more on https://vuetifyjs.com

Remark: By November 2023, Vuetify 3 (Vue 3) will almost reach 100% feature parity with Vuetify 2.

2. PrimeVue

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 September 2023, PrimeVue has over 4,300 stars on GitHub and an average weekly downloads count of over 90,000.

Learn more on https://primevue.org/

3. Quasar

As of September 2023, Quasar has over 24,200 stars on GitHub and an average weekly downloads count of over 100,000.

Learn more on https://quasar.dev/

Chinese focused community

1. Element Plus

As of September 2023, Element Plus has over 21,300 stars on GitHub and an average weekly downloads count of over 170,000.

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

2. Ant Design Vue

As of September 2023, Ant Design Vue has over 18,600 stars on GitHub and an average weekly downloads count of over 80,000.

Learn more on https://antdv.com/

3. Vant

Vant is a TypeScript-based UI component library developed by Youzan, a leading merchant servicing platform in China. It offers 80+ easy-to-use and highly customizable components such as button groups, search boxes, and dropdown menus.

Vant is designed to be lightweight and highly performant, and it provides an easy-to-use component API and user-friendly documentation that makes it very easy for developers to get started. The components are all tree-shakable so they can be imported individually to your application without waste.

As of September 2023, Vant has over 21,900 stars on GitHub and an average weekly downloads count of over 50,000.

Learn more on https://vant-ui.github.io/

Conclusion

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

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

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

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

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

Let's say you create a reusable component:

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

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

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

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

What are Reusable Components?

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

Benefits of Reusable Components

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

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

3 Problems when Applying Reusable Concept

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

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

A Case Study

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

Prototype

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

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

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

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

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

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

Phase 1

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

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

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

    const props = defineProps<Props>();

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

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

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

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

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

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

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

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

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

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

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

Phase 2

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

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

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

const props = defineProps<Props>();

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

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

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

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

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

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

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

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

This new requirement causes a headache:

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

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

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

How to Overcome the Above Problems

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

Refactor Reusable Components

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

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

Apply Solution to the Case Study

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

Card component
Avatar component
Name component
User detail component

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

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

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

    interface Props {
        image: string;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    const props = defineProps<Props>();

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

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

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

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

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

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

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

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

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

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

Finally, I will combine the components together like below

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Do Unit Tests Help?

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

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

Conclusion

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

Check Out Vue PDF Viewer for Your Next Project

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

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

🎉Introducing Atomic Design in Vue.js [Updated]🔥

Kittisak Ma — Wed, 23 Aug 2023 12:10:56 +0000

In my experience of building and delivering systems for various clients, depending on their requirements or preferences, it’s inevitable that I may use UI frameworks and libraries like Ant Design and Tailwind. Often, I have to build on top of each components. If you are working alone, it’s not such a big problem. But when working as a team, things get complicated quickly. 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:

Atoms
Molecules
Organisms
Templates
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

🆕 Update: While this article uses Vue 2 in its code examples, I've also created a full Vue 3 + Composition API + TypeScript version on Stackblitz.

👉 Try it on Stackblitz

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