Vue - introduction to Web Components

In my previous blog post I outlined what Vue is and went through a bit of its history and versions one through three and their key features. Like I mentioned there Web Components have long been a key part of Vue and they are a powerful feature that deserves a bit more than a brief mention. If you’re not familiar with Vue or you just want to read about it head on here, if not let’s get right into Web Components and what they’re all about.

The basics

Web Components are a set of features that let you create new custom, reusable, encapsulated HTML tags for use in web pages and apps. They are supported by every major browser and are backwards compatible through Javascript-based custom libraries. Basically they can be used with any JavaScript library or framework that works with HTML. To be precise Web Components consist of three technologies which work together:

• Custom Elements - HTML elements with custom behaviours, templates and tag names made with a set of JavaScript APIs,
• Shadow DOM - a ‘DOM within a DOM’ it’s its own isolated DOM tree with its own elements and styles completely separate from the original DOM. This allows encapsulation and componentization natively on the web platform without having to rely on iframes,
• HTML Templates - a tool for holding HTML which is not to be rendered when a page is loaded but instead can be instantiated when called upon.

What’s that got to do with Vue?

Now with that brief outline of the general functionality of Web Components behind us, let's focus on where Vue comes in. As mentioned previously the new features in Vue 3 are a major help here when it comes to components. The Composition API offers more flexibility as code can now be organized as functions, each dealing with a specific feature. It also makes extracting and reusing logic between components much easier. Teleport allows specifying template HTML that can be sent to another part of the DOM or even outside the scope of the app. Which is useful if one component has some HTML that has to get rendered in an alternative location for example if it's run on a widget or a small part of the webpage. Additionally Vue has long provided the ability to package SFCs or single file components as a Web Component, which basically lets you create and use your own custom HTML tags.

Source: Vuejs.org

You’re not on your own

All this makes Vue a very straightforward and easily customizable tool for developers wanting to work with Web Components. As I mentioned you can quite easily start working on your own components or you can hop on GitHub and check out some of those made by the community. Let’s take a look at that:

• Vuetify - a UI framework built on top of Vue.js lets you create clean, semantic, reusable UI components and works with Vue’s Server Side Rendering (SSR). It provides over 80 Vue components which makes for a pretty nice base for creating apps with way less effort.
• Vue Material - a scalable library made exactly in accordance with the Google Material Design specs. Contains over 56 components useful for making complex app shells and will help make apps that can fit on every screen with support for all modern Web Browsers.
• Quasar - a full-fledged framework that supports features like minification and caching. Additionally it provides components for your framework, over 80 of them in fact. It also provides support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app & Browser Extension) and has tight integration with its own CLI. Quasar is fairly extensive and has in-depth documentation and robust end-to-end implementation.
• Buefy - lightweight UI component library based on Vue and Bulma (a CSS framework) Simply put Buefy provides a JavaScript layer for interfaces created with Bulma CSS. If you’re looking to build apps with a simple and intuitive interface this tool will help you hit the ground running.
• iView - a Vue.js 2.0 based library which provides a number of high quality UI components and widgets. It also has its own CLI tool, iView-cli, which has a visual tool for component scaffolding and an offline version of the documentation. If you’re into neat and elegant design this is the way to go.

Which to choose?

That’s a lot of components right? The idea is to help get your project off the ground as quickly and easily as possible by providing you with a base of useful components. This way you can start working on your app right away without spending time on making your own components. Not that there's anything wrong with that, you can add our own components and Vue is a great help with that. Bear in mind most of these tools are geared towards a certain type of app, so you’ll have to check out which one fits your needs best. There’s plenty to choose from on GitHub, you can use them, join one of the communities behind those mentioned above and improve it or even create your own libraries to help others. The possibilities here are almost limitless.