https://github.com/ElMassimo/vue-custom-element-example

An example on how to define custom elements using Vue 3
https://github.com/ElMassimo/vue-custom-element-example

custom-elements demo tutorial vue vuejs3 web-components web-components-library

Last synced: 3 months ago
JSON representation

An example on how to define custom elements using Vue 3

• Host: GitHub
• URL: https://github.com/ElMassimo/vue-custom-element-example
• Owner: ElMassimo
• License: mit
• Created: 2021-08-10T15:35:20.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-13T21:07:38.000Z (about 2 years ago)
• Last Synced: 2024-06-04T00:39:44.325Z (5 months ago)
• Topics: custom-elements, demo, tutorial, vue, vuejs3, web-components, web-components-library
• Language: TypeScript
• Homepage: https://maximomussini.com/posts/vue-custom-elements/
• Size: 159 KB
• Stars: 56
• Watchers: 4
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
[defineCustomElement]: https://v3.vuejs.org/guide/web-components.html#definecustomelement

[custom elements]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

[demo]: https://vue-custom-element-example.netlify.app

[how to export]: https://github.com/ElMassimo/vue-custom-element-example/tree/main/package

[how to use them]: https://github.com/ElMassimo/vue-custom-element-example/tree/main/playground

[blog]: https://maximomussini.com/posts/vue-custom-elements/



  


    

  

  defineCustomElement(DarkModeSwitch)





This repo is an example on how to use the [`defineCustomElement`][defineCustomElement] API in Vue 3.

It contains examples on [how to export] Vue components as [custom elements], and [how to use them] in any app.

[__Read the blog post__][blog] for a step by step discussion.

## Demo 🚀

[Visit the live demo][demo] to see the custom element in action.

## Play 🎸 

npm run dev: build the library and start the playground