A web component library with a VueJS API
npm install @bbn/bbn-cpWelcome to our Web Components library!
When we wanted to move our VueJS code to the new version, we changed our mind and decided to keep our components as they were and build our own library based on web components, but keeping the same API used by VueJS. Whether you're familiar with VueJS or new to component-based development, our library offers an intuitive and powerful way to create dynamic web applications.
This guide will walk you through setting up a basic project using our Web Components library. By the end, you'll have a functional web application with dynamic data bindings and event handling.
Basic knowledge of HTML, CSS, and JavaScript.
A modern web browser that supports Web Components.
Download the latest version of our library from the official repository.
Include the library in your HTML file with a tag:
``html`
Define a container for your app. This can be any HTML element:
`html`
Initialize your app with the bbn.cp.createApp method inside a
`
Inside your app's container, use custom elements (e.g., , ) to create an interactive UI. Bind data to these elements with the v-model directive and use {{}} syntax for text interpolation:
`html``
Name: {{myData.name}}
Color: {{myData.color}}
Open your HTML file in a web browser. You should see your app running, complete with reactive data bindings and interactive components.
Congratulations! You've just created a simple web application using our Web Components library with a Vue-like API. Explore the documentation to learn more about available components, directives, and features to build more complex and dynamic applications. Happy coding!