@aurelia/web-components NPM | npm.io

2.0.0-beta.24 • Published 6 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

6 months ago

@aurelia/web-components

Installing

For the latest stable version:

npm i @aurelia/web-components

For our nightly builds:

npm i @aurelia/addons@web-components

Usage

Here is an example configuration for webcomponents.js to show how to register aurelia custom elements into web components:

import { WcCustomElementRegistry } from '@aurelia/web-components'; 
import { DI, Registration  } from '@aurelia/kernel';
import { StandardConfiguration, IPlatform } from '@aurelia/runtime-html';
import {BrowserPlatform} from '@aurelia/platform-browser'

// Create the Aurelia container
const container = DI.createContainer();
// Register the platform
container.register(
  Registration.instance(IPlatform, BrowserPlatform.getOrCreate(globalThis)));
// Register the StandardConfiguration
container.register(StandardConfiguration); // This registers core services like IExpressionParser
const registry = container.get(WcCustomElementRegistry);

// Import custom component classes
import { HelloName} from './components/hello-name';
// Register web component name with it's view model implementation
registry.define('my-hello-name', HelloName);

An example vite.webcomponents.config:

export default defineConfig({
  ...
  
  build: {
    lib: {
      entry: './src/webcomponents.js', // Entry point for the web components
      name: 'MyComponents', // Global name for the library
      fileName: (format) => `my-components.${format}.js`, // Output file name
    },
    rollupOptions: {
      external: [], // Add external dependencies here if needed
      output: {
        globals: {}, // Define global variables for external libraries if any
      },
    },
    outDir: './dist-webcomponents', // Output directory for the web components
  },
  ...
});

You may also add separate buildwc task for building web components inside package.json:

...
"scripts": {
    ...
    "buildwc": "vite build --config vite.webcomponents.config.js",
    ...
  },
...

Then you may build web components using npm run buildwc and copy e.g. the resulting dist/my-components.es.js and style style.css into your desired location and use '' web component in index.html:

<html>
  <head>
  ...
    <script src="my-components.es.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>    
  ...
  <my-hello-name></my-hello-name>
  ...
  </body>
</html>

aurelia web-components

@aurelia/kernel @aurelia/metadata @aurelia/runtime @aurelia/runtime-html

@everything-registry/sub-chunk-96 @zalastax/nolb-_aur @infinitebrahmanuniverse/nolb-_aur

2.1.0-dev.202412161127

11 months ago

2.0.1-dev.202501261023

9 months ago

2.0.1-dev.202502111125

9 months ago

2.0.1-dev.202411141142

12 months ago

2.1.0-dev.202501070107

10 months ago

2.0.1-dev.202504271314

6 months ago

6 months ago

9 months ago

2.1.0-dev.202501092330

10 months ago

2.0.1-dev.202409300916

1 year ago

1 year ago

2.1.0-dev.202409251354

1 year ago

2.1.0-dev.202409041326

1 year ago

2.0.1-dev.202408081231

1 year ago

2.0.1-dev.202407071342

1 year ago

2.0.1-dev.202406121156

1 year ago

2.0.1-dev.202405230048

1 year ago

2.1.0-dev.202405280947

1 year ago

2.0.1-dev.202407111120

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2.1.0-dev.202407271309

1 year ago

2.1.0-dev.202405130849

1 year ago

2.0.1-dev.202405110109

1 year ago

1 year ago

2.1.0-dev.202405060015

1 year ago

2.0.1-dev.202405031042

1 year ago

1 year ago

2.0.1-dev.202405010737

1 year ago

2.0.1-dev.202404281254

2 years ago

2.0.1-dev.202404171154

2 years ago

2.0.1-dev.202404170324

2 years ago

2 years ago

2.1.0-dev.202404150648

2 years ago

2.1.0-dev.202404120945

2 years ago

2.0.1-dev.202404030015

2 years ago

2.0.1-dev.202404030935

2 years ago

2.0.1-dev.202404041108

2 years ago

2 years ago

2.0.1-dev.202403150512

2 years ago

2 years ago

2.0.1-dev.202403021005

2 years ago

2 years ago

2.1.0-dev.202402292237

2 years ago

2.1.0-dev.202402270447

2 years ago

2.0.1-dev.202402130428

2 years ago

2 years ago

2.1.0-dev.202401310648

2 years ago

2.1.0-dev.202401281151

2 years ago

2 years ago

2.0.1-dev.202401261010

2 years ago

2.1.0-dev.202401061915

2 years ago

2 years ago

2.0.1-dev.202312121308

2 years ago

2.0.1-dev.202312050532

2 years ago

2.0.1-dev.202311120949

2 years ago

2.0.1-dev.202311060259

2 years ago

2.0.1-dev.202310131843

2 years ago

2.1.0-dev.202307101053

2 years ago

2.0.1-dev.202310060506

2 years ago

2 years ago

2.0.1-dev.202310162153

2 years ago

2.0.1-dev.202310121732

2 years ago

2.1.0-dev.202307062228

2 years ago

2.0.1-dev.202307240932

2 years ago

2.0.1-dev.202306161507

2 years ago

2.1.0-dev.202306130710

2 years ago

2 years ago

2.0.1-dev.202306180925

2 years ago

2.1.0-dev.202306061010

2 years ago

2.1.0-dev.202305021031

2 years ago

2.0.1-dev.202304151358

3 years ago

2 years ago

3 years ago

3 years ago

2.0.1-dev.202304181031

3 years ago

2.1.0-dev.202305122230

2 years ago

2.1.0-dev.202304270200

3 years ago

2.1.0-dev.202305160723

2 years ago

2.1.0-dev.202304071730

3 years ago

2.1.0-dev.202304111838

3 years ago

2.1.0-dev.202304050629

3 years ago

2.1.0-dev.202304070940

3 years ago

2.1.0-dev.202304060017

3 years ago

2.1.0-dev.202303312216

3 years ago

2.1.0-dev.202302220540

3 years ago

2.1.0-dev.202302262152

3 years ago

2.1.0-dev.202302272114

3 years ago

2.1.0-dev.202302182151

3 years ago

2.1.0-dev.202304030920

3 years ago

2.1.0-dev.202303150804

3 years ago

3 years ago

2.0.1-dev.202303301732

3 years ago

3 years ago

2.1.0-dev.202302232352

3 years ago

2.1.0-dev.202302082041

3 years ago

2.0.1-dev.202302261930

3 years ago

2.0.1-dev.202303292039

3 years ago

2.1.0-dev.202302191231

3 years ago

2.1.0-dev.202302181301

3 years ago

2.1.0-dev.202302191219

3 years ago

2.0.1-dev.202302261832

3 years ago

2.1.0-dev.202302191347

3 years ago

2.1.0-dev.202302190926

3 years ago

2.1.0-dev.202302231922

3 years ago

2.1.0-dev.202302050906

3 years ago

2.1.0-dev.202302142008

3 years ago

2.1.0-dev.202302262136

3 years ago

2.1.0-dev.202303091738

3 years ago

2.1.0-dev.202212311618

3 years ago

2.1.0-dev.202302011936

3 years ago

2.0.1-dev.202301160638

3 years ago

2.1.0-dev.202301310330

3 years ago

2.1.0-dev.202301300703

3 years ago

2.0.1-dev.202301200352

3 years ago

2.1.0-dev.202212271044

3 years ago

2.0.1-dev.202301141328

3 years ago

2.0.1-dev.202301241849

3 years ago

3 years ago

2.0.1-dev.202301161830

3 years ago

2.0.1-dev.202301251906

3 years ago

2.0.1-dev.202301252327

3 years ago

2.1.0-dev.202301072025

3 years ago

2.0.1-dev.202301121655

3 years ago

2.1.0-dev.202212261059

3 years ago

2.0.1-dev.202301122113

3 years ago

2.1.0-dev.202212300244

3 years ago

2.1.0-dev.202301101819

3 years ago

2.1.0-dev.202301301058

3 years ago

2.1.0-dev.202301062153

3 years ago

2.1.0-dev.202301121610

3 years ago

2.1.0-dev.202210210852

3 years ago

2.1.0-dev.202210161653

3 years ago

2.1.0-dev.202211231311

3 years ago

2.1.0-dev.202210232152

3 years ago

2.1.0-dev.202210132300

3 years ago

2.1.0-dev.202210170819

3 years ago

2.1.0-dev.202212231952

3 years ago

2.1.0-dev.202210312231

3 years ago

2.1.0-dev.202211301939

3 years ago

2.1.0-dev.202210101206

3 years ago

0.8.0-dev.202010151055

5 years ago

0.8.0-dev.202010130234

5 years ago

0.8.0-dev.202010121021

5 years ago

0.8.0-dev.202010091307

5 years ago

0.8.0-dev.202010091301

5 years ago

0.8.0-dev.202010080100

5 years ago

0.8.0-dev.202010080223

5 years ago

0.8.0-dev.202010080125

5 years ago

0.8.0-dev.202010072206

5 years ago

0.8.0-dev.202010070306

5 years ago

0.8.0-dev.202010072336

5 years ago

0.8.0-dev.202010070120

5 years ago

0.8.0-dev.202010060234

5 years ago

0.8.0-dev.202010060014

5 years ago

0.8.0-dev.202010052040

5 years ago

0.8.0-dev.202010050535

5 years ago

0.8.0-dev.202010050213

5 years ago

0.8.0-dev.202010031855

5 years ago

0.8.0-dev.202010031518

5 years ago

0.8.0-dev.202010031322

5 years ago

0.8.0-dev.202010020705

5 years ago

0.8.0-dev.202010011758

5 years ago

0.8.0-dev.202009281652

5 years ago

0.8.0-dev.202009261951

5 years ago

0.8.0-dev.202007050834

5 years ago

0.8.0-dev.202007041506

5 years ago

0.8.0-dev.202007041536

5 years ago

0.8.0-dev.202006241024

5 years ago

0.8.0-dev.202006231201

5 years ago

0.8.0-dev.202006120521

5 years ago

0.8.0-dev.202006110450

5 years ago

0.8.0-dev.202006101158

5 years ago

0.8.0-dev.202006101005

5 years ago

0.8.0-dev.202006101205

5 years ago

0.8.0-dev.202006101130

5 years ago

0.8.0-dev.202006101254

5 years ago

0.8.0-dev.202006100442

5 years ago

0.8.0-dev.202006100445

5 years ago

0.8.0-dev.202006100649

5 years ago

0.8.0-dev.202006090656

5 years ago

0.8.0-dev.202006080707

5 years ago

0.8.0-dev.202006080431

5 years ago

0.8.0-dev.202006080450

5 years ago

0.8.0-dev.202006080457

5 years ago

0.8.0-dev.202005200307

5 years ago

0.8.0-dev.202005181010

5 years ago

0.8.0-dev.202005161215

5 years ago

0.8.0-dev.202005161248

5 years ago

0.8.0-dev.202005131602

5 years ago

0.7.1-dev.202005120219

5 years ago

0.7.0-dev.202005080323

5 years ago

0.7.0-dev.202005082023

5 years ago

5 years ago

0.7.0-dev.202004290437

6 years ago

0.7.0-dev.202004271639

6 years ago

0.7.0-dev.202004250256

6 years ago

0.7.0-dev.202004252113

6 years ago

0.7.0-dev.202004251657

6 years ago

0.7.0-dev.202004242202

6 years ago

0.7.0-dev.202004232042

6 years ago

0.7.0-dev.202004230130

6 years ago

0.7.0-dev.202004212352

6 years ago

0.7.0-dev.202004212047

6 years ago

0.7.0-dev.202004191447

6 years ago

0.7.0-dev.202004200127

6 years ago

0.7.0-dev.202004141437

6 years ago

0.7.0-dev.202004141952

6 years ago

0.7.0-dev.202004141429

6 years ago

0.7.0-dev.202004092222

6 years ago

0.7.0-dev.202004080424

6 years ago

0.7.0-dev.202004062202

6 years ago

0.7.0-dev.202004062058

6 years ago

0.7.0-dev.202004031507

6 years ago

0.7.0-dev.202004030212

6 years ago

0.7.0-dev.202004022224

6 years ago

0.7.0-dev.202004012038

6 years ago

0.7.0-dev.202004010149

6 years ago

0.7.0-dev.202004010256

6 years ago

0.7.0-dev.202003262202

6 years ago

0.7.0-dev.202003201712

6 years ago

0.7.0-dev.202003190346

6 years ago

0.7.0-dev.202002082141

6 years ago

0.7.0-dev.202002042105

6 years ago

0.7.0-dev.202001260237

6 years ago

0.7.0-dev.202001191205

6 years ago