Vue's component model is designed with these needs in mind as a coherent system. Native custom elements SSR typically involves simulating the DOM in Node.js and then serializing the mutated DOM, while Vue SSR compiles into string concatenation whenever possible, which is much more efficient. To build an actual application, we need quite a few additional capabilities which the platform does not cover:Ī declarative and efficient templating system Ī reactive state management system that facilitates cross-component logic extraction and reuse Ī performant way to render the components on the server and hydrate them on the client (SSR), which is important for SEO and Web Vitals metrics such as LCP. However, Web Components APIs are relatively low-level and bare-bones. There is indeed a certain level of feature overlap between Custom Elements and Vue Components: they both allow us to define reusable components with data passing, event emitting, and lifecycle management.
Here we will try to explain why we believe that this is an overly simplistic take on the problem. Some developers believe that framework-proprietary component models should be avoided, and that exclusively using Custom Elements makes an application "future-proof". Js // module.exports = Web Components vs. If you are using Vue with a build setup, the option should be passed via build configs since it is a compile-time option. To let Vue know that certain elements should be treated as custom elements and skip component resolution, we can specify the compilerOptions.isCustomElement option. This will cause Vue to emit a "failed to resolve component" warning during development. Consuming custom elements inside a Vue application largely works the same as using native HTML elements, with a few things to keep in mind: Skipping Component Resolution īy default, Vue will attempt to resolve a non-native HTML tag as a registered Vue component before falling back to rendering it as a custom element. Vue scores a perfect 100% in the Custom Elements Everywhere tests.
Whether you are integrating custom elements into an existing Vue application, or using Vue to build and distribute custom elements, you are in good company. Vue has excellent support for both consuming and creating custom elements. We consider Vue and Web Components to be primarily complementary technologies. Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements.
0 kommentar(er)
