gaetanbrl / vue-custom-element-template

A simple example of reusable vuejs 3 custom element

Custom Element with Vuejs 3

This template should help get you started developing Web Custom Elment with Vue 3.

https://vuejs.org/guide/extras/web-components

## Prerequisites

• nvm (or node >= v20)

Install

git clone https://github.com/Gaetanbrl/vue-custom-element-template.git
cd vue-custom-element-template
npm install

build

Will build /src with vite (see vite.config.js file)

npm run build

test

Will use Vite to start dev serveur.

cd test_html
npm install
npm start

Add new custom element

• Add a custom element component in /src/components
• Open /src/webcomponents.js and declare your own new custom element
• Execute build command from /vue-custom-element-template directory
• Use the component in /test_html/index.html
• Start dev serveur from /test_html directory