https://github.com/vaadin/npm-addon-template
Vaadin add-on template using 3rd party web component from npmjs.com.
https://github.com/vaadin/npm-addon-template
addon java npm template-repository vaadin webcomponents
Last synced: 3 months ago
JSON representation
Vaadin add-on template using 3rd party web component from npmjs.com.
- Host: GitHub
- URL: https://github.com/vaadin/npm-addon-template
- Owner: vaadin
- License: other
- Created: 2017-10-19T12:21:53.000Z (over 8 years ago)
- Default Branch: v25
- Last Pushed: 2026-04-14T07:10:37.000Z (3 months ago)
- Last Synced: 2026-04-14T09:15:12.139Z (3 months ago)
- Topics: addon, java, npm, template-repository, vaadin, webcomponents
- Language: TypeScript
- Homepage: https://vaadin.com/directory
- Size: 7.74 MB
- Stars: 8
- Watchers: 5
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Add-on starter for a web component integration from NPM
This is an example project for creating a Java wrapper for an existing Lit component that is available in npm.
The example code integrates `@axa-ch/input-text`.
## Add-on architecture
### Alternative add-on templates
If you wish to build and publish an add-on or extension in [Vaadin Directory](https://vaadin.com/directory), Vaadin provides the following three template projects:
1. [vaadin/addon-template](https://github.com/vaadin/addon-template): Create a composite component. This Java-only template is the easiest when extending Vaadin Java components.
2. [vaadin/client-server-addon-template](https://github.com/vaadin/client-server-addon-template): Build a standalone, client-server TypeScript-Java component. This template provides you with a [Lit-based](https://github.com/lit/lit/) example to start with.
3. **(this repo)** [vaadin/npm-addon-template](https://github.com/vaadin/npm-addon-template): Wrap a web component from [npmjs.com](https://npmjs.com/) as a Vaadin Java component.
## Development instructions
JavaScript modules can either be published as an NPM package or be kept as local
files in your project. The local JavaScript modules should be put in
`src/main/resources/META-INF/frontend` so that they are automatically found and
used in the using application.
If the modules are published then the package should be noted in the component
using the `@NpmPackage` annotation in addition to using `@JsModule` annotation.
Starting the test/demo server:
1. Run `mvn jetty:run`.
2. Open http://localhost:8080 in the browser.
## Publishing to Vaadin Directory
You can create the zip package needed for [Vaadin Directory](https://vaadin.com/directory/) using
```
mvn versions:set -DnewVersion=1.0.0 # You cannot publish snapshot versions
mvn install -Pdirectory
```
The package is created as `target/axa-input-text-1.0.0.zip`
For more information or to upload the package, visit https://vaadin.com/directory/my-components?uploadNewComponent