# Using components of one aurelia app as web components in another aurelia app

**URL:** <https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596>\
**Category:** Help Requests\
**Created:** [June 24, 2020, 7:08am UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596 "2020-06-24T07:08:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Benzolitz](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/benzolitz/32/1859_2.png) [@Benzolitz](https://discourse.aurelia.io/u/Benzolitz)\
**Post date:** [June 24, 2020, 7:08am UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596/1 "2020-06-24T07:08:44Z")

</div>

Hi everyone,

I would like to use the components of one aurelia app as web components for other aurelia apps, e.g: My first app “Chat” presents a couple of web components to be used in other projects and my second app “platform” integrates these components.

I found in another discussion ([Sharing components between projects](https://discourse.aurelia.io/t/sharing-components-between-projects/1743)) that the general consensus was to use aurelia-plugins for the components and to implement the plugins as a npm module.  
My preferred path would be, to be able to reference the “chat” app as a web component in my “platform” app and to **not** use npm. Just like other web components here: [webcomponents.org/element/progress-ring-component](http://webcomponents.org/element/progress-ring-component) or [webcomponents.org/element/@zooplus/zoo-web-components/6.0.3](http://webcomponents.org/element/@zooplus/zoo-web-components/6.0.3)

I did try out the aurelia plugin [web-components](https://github.com/aurelia/web-components), but so far I was not able to implement the plugins into the “platform” project.

Does anyone know a way, to create web components from an aurelia app and use those components in another aurelia app (other than plugin + npm)?

Kind Regards,  
Benzolitz

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 24, 2020, 7:46am UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596/2 "2020-06-24T07:46:25Z")

</div>

May I know what error you got when trying to implement the components to the platform app?

---

<div class="post-metadata">

**Author:** ![Benzolitz](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/benzolitz/32/1859_2.png) [@Benzolitz](https://discourse.aurelia.io/u/Benzolitz)\
**Post date:** [June 26, 2020, 7:14am UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596/3 "2020-06-26T07:14:46Z")

</div>

I don’t really get any errors. It just does not work. No matter which combination of JavaScript files I add to my platform app, I can’t access the components of the chat app.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 26, 2020, 10:11pm UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596/4 "2020-06-26T22:11:36Z")

</div>

Can you help show what you meant with a gist? maybe pseudo code is fine too, working is more awesome though 😛

Please try it here [https://gist.dumber.app](https://gist.dumber.app)

---

<div class="post-metadata">

**Author:** ![Benzolitz](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/benzolitz/32/1859_2.png) [@Benzolitz](https://discourse.aurelia.io/u/Benzolitz)\
**Post date:** [August 17, 2020, 12:37pm UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596/6 "2020-08-17T12:37:35Z")

</div>

I uploaded a test project onto github ([https://github.com/Benzolitz/MyLoremIpsumHomepage](https://github.com/Benzolitz/MyLoremIpsumHomepage)), since I don’t think I can actually show what I want to do with such lightweight IDEs.

I got a step closer to my goal - sadly I haven’t had much time to work on this the last couple of weeks.

I now have two separate projects working:

- `portal` which is my portal application I want to add other applications too.
- `todo-list` which is supposed to be used as a standalone application, but also as a web-component in other applications.

In the `todo-list` application I added two web-components (_todo-list_ & _todo-list-item_) which get set as web-components in the _src/resources/index.ts_ file.  
If I start the `todo-list` application I can use the web-components inside this app as standard html-web-components. When I build the project to produce the _todo-components.min.js_ file I can add this file to my other project `portal` and use the web-components as standard html-web-components aswell.

My problem at the moment is, that I can not use any aurelia functionality with these web-components - not in my `todo-list` and also not in my `portal` application.

Does anyone know any way, to combine the web-components with aurelia functionality?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 18, 2020, 2:21pm UTC](https://discourse.aurelia.io/t/using-components-of-one-aurelia-app-as-web-components-in-another-aurelia-app/3596/7 "2020-08-18T14:21:07Z")

</div>

The idea of aurelia-web-component plugin is that you can define your web-component custom-element, and drive their behaviors with Aurelia view models. Since it’s about defining your view models and the instructions for those view models, you can, and should be able to easily connect projects together using the view models.

Something like this:

In project 1

```auto
export class MyPlugin1TodoList {

}

```

In project 2

```auto
import { MyPlugin1TodoList } from 'project-1';

export function configure(aurelia) {
    
   aurelia
     .start()
     .then(() => {
      const registry = aurelia.container.get(CustomElementRegistry);

      return registry.register(MyPlugin1TodoList);
    });
}

```