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.
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.
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:
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.
The GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster thanks to dozens of built-in micro features. Its graphical interface will also fix communication within your product team. Visualization is the key!