# Custom elements from outside the src directory

**URL:** <https://discourse.aurelia.io/t/custom-elements-from-outside-the-src-directory/3085>\
**Category:** Help Requests\
**Created:** [November 24, 2019, 8:16pm UTC](https://discourse.aurelia.io/t/custom-elements-from-outside-the-src-directory/3085 "2019-11-24T20:16:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alternatex](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alternatex/32/1540_2.png) [@alternatex](https://discourse.aurelia.io/u/alternatex)\
**Post date:** [November 24, 2019, 8:16pm UTC](https://discourse.aurelia.io/t/custom-elements-from-outside-the-src-directory/3085/1 "2019-11-24T20:16:31Z")

</div>

I have two Aurelia apps which share both design and functional elements. To achieve this I have a third shared Aurelia project in which I keep all the SCSS and TS classes that are common between the two projects and I reference them from here. There’s one thing I haven’t been able to make shared though, and that is custom elements. Using this approach:

```
<require from="./../resources/elements/some-custom-element"></require>

```

I’ve only been able to require custom elements from within the current app’s src folder. Trying any other URI has ended with me getting a Webpack error message.

How do I reference a custom element from a completely different folder than the root one of the current project? Thanks ahead.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 24, 2019, 9:13pm UTC](https://discourse.aurelia.io/t/custom-elements-from-outside-the-src-directory/3085/2 "2019-11-24T21:13:20Z")

</div>

It requires some special setup in bundler to load source directly from other directory.

The recommended solution is to put shared func and shared elements in an Aurelia plugin project, then use the plugin in both apps.

Creating plugin is easy, just follow [https://aurelia.io/docs/plugins/write-new-plugin](https://aurelia.io/docs/plugins/write-new-plugin)

---

<div class="post-metadata">

**Author:** ![alternatex](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alternatex/32/1540_2.png) [@alternatex](https://discourse.aurelia.io/u/alternatex)\
**Post date:** [November 26, 2019, 2:23pm UTC](https://discourse.aurelia.io/t/custom-elements-from-outside-the-src-directory/3085/3 "2019-11-26T14:23:15Z")

</div>

Okay I will try this approach and report back with the results.