web-padawan / Polymer3 Webpack Starter
Polymer 3 starter built with Vaadin components and Vaadin.Router library, using webpack and modern tools
Stars: ✭ 99
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Polymer3 Webpack Starter
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (-18.18%)
Mutual labels: webcomponents, web-components
Vanilla Colorful
A tiny color picker custom element for modern web apps (2.7 KB) 🎨
Stars: ✭ 467 (+371.72%)
Mutual labels: web-components, webcomponents
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-82.83%)
Mutual labels: webcomponents, web-components
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (-73.74%)
Mutual labels: webcomponents, web-components
Webcomponents From Zero To Hero
An introduction to writing raw web components.
Stars: ✭ 70 (-29.29%)
Mutual labels: web-components, webcomponents
vaadin-checkbox
The Web Component for customized checkboxes. Part of the Vaadin components.
Stars: ✭ 18 (-81.82%)
Mutual labels: webcomponents, web-components
Vaadin
An evolving set of open source web components for building mobile and desktop web applications in modern browsers.
Stars: ✭ 424 (+328.28%)
Mutual labels: web-components, webcomponents
Dash-UI
Bootstrap 5 Admin & Dashboard Template - Dash-UI. Dash UI Kit is a free and open-source components and templates kit fully coded with Bootstrap 5.
Stars: ✭ 213 (+115.15%)
Mutual labels: web-components, starter-kit
Blazor.fast
A tiny wrapper around Fast and Fluent Web Components to integrate with Blazor and easily use the EditForm components
Stars: ✭ 23 (-76.77%)
Mutual labels: web-components, webcomponents
Elix
High-quality, customizable web components for common user interface patterns
Stars: ✭ 546 (+451.52%)
Mutual labels: web-components, webcomponents
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-78.79%)
Mutual labels: webcomponents, web-components
Aybolit
Lightweight web components library built with LitElement.
Stars: ✭ 90 (-9.09%)
Mutual labels: web-components, webcomponents
web-component
Lightweight library providing interface for building web components
Stars: ✭ 37 (-62.63%)
Mutual labels: webcomponents, web-components
cwco
Powerful and Fast Web Component Library with a Simple API
Stars: ✭ 27 (-72.73%)
Mutual labels: webcomponents, web-components
lit-components
Moved to https://github.com/vaadin/component-mixins
Stars: ✭ 59 (-40.4%)
Mutual labels: webcomponents, web-components
Vaadin Core
An evolving set of free, open source web components for building mobile and desktop web applications in modern browsers.
Stars: ✭ 382 (+285.86%)
Mutual labels: web-components, webcomponents
scheduler-component
A Web Component wrapper for FullCalendar library that uses Polymer version 2.0 and ES6.
Stars: ✭ 24 (-75.76%)
Mutual labels: webcomponents, web-components
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (-30.3%)
Mutual labels: webcomponents, web-components
Awesome Stenciljs
List of Awesome Web Components Built with StencilJS
Stars: ✭ 520 (+425.25%)
Mutual labels: web-components, webcomponents
Wired Elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
Stars: ✭ 8,848 (+8837.37%)
Mutual labels: web-components, webcomponents
Polymer 3 Webpack Starter
This is an example project demonstrating how you can build a frontend part of the JavaScript application using Vaadin components and Vaadin Router library, and leverage the benefits of the modern tools.
Lumo version ↗ | Material version ↗
Features
- Latest Polymer 3 and up-to-date webcomponentsjs polyfill
- UI built using latest Vaadin components shipped as ES modules
- Application with two different themes: Lumo and Material
- Vaadin Router configured for code splitting and lazy loading
- webpack 4 for easy development and production bundling
- Up-to-date Babel 7 verified to work nice with Custom Elements
- Modern build for evergreen browsers using BabelMultiTargetPlugin
- Minification of JavaScript using Terser supporting ES2015+
- Minification of HTML and CSS in tagged template literals
- Automatic service worker generation using Workbox
- Automatic bundle analysis and report generation
- Web server using express and History API middleware
- Compressing static files for production using gzip and Brotli algorithm
- Serving compressed files using express-static-gzip middleware
Install dependencies
npm i
Start the development server
Start webpack-dev-server
on localhost http://127.0.0.1:3000
:
npm run dev
Lint JS
npm run lint:js
Lint CSS
npm run lint:css
Lint JS and CSS
npm run lint
Build
Run production build:
npm run build
Serve the built output on localhost http://127.0.0.1:8000
:
npm start
Visualize build output
Run production build and start HTTP server to show bundle report:
npm run build:analyze
Material version
Check out material branch for Material version of the starter, and a full diff of changes.
Known limitations
- Using
import.meta
suggested by Polymer docs is not supported out of the box, see webpack/webpack#6719. Support can be added with babel-plugin-bundled-import-meta or webpack loader import-meta-url-loader
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].