# Custom Vue Component - Nested Vue component Reference

**URL:** <https://community.weweb.io/t/custom-vue-component-nested-vue-component-reference/2351>\
**Category:** Ask us anything\
**Created:** [April 19, 2023, 6:12am UTC](https://community.weweb.io/t/custom-vue-component-nested-vue-component-reference/2351 "2023-04-19T06:12:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![shaobsh](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@shaobsh](https://community.weweb.io/u/shaobsh)\
**Post date:** [April 19, 2023, 6:12am UTC](https://community.weweb.io/t/custom-vue-component-nested-vue-component-reference/2351/1 "2023-04-19T06:12:52Z")

</div>

I’m building a custom vue component and I’m reaching a point where i would like to externalize some of the code to another vue file (ex. Collapse Component). Can I create an external .vue file in my code base for the weweb vue component and import that into the wwSection.vue file? I know it might seem like the obvious thing to do is to create another ww-custom component but the component isn’t being used as an sub element. It’s rather rendered an svg element on a canvas in a simulated graph within the main file.

Hope this makes sense!

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [April 19, 2023, 6:48am UTC](https://community.weweb.io/t/custom-vue-component-nested-vue-component-reference/2351/2 "2023-04-19T06:48:39Z")

</div>

In your custom element you can import and use others vue elements.

> **[| Vue.js](https://vuejs.org/api/sfc-script-setup.html#using-components)**

---

<div class="post-metadata">

**Author:** ![shaobsh](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@shaobsh](https://community.weweb.io/u/shaobsh)\
**Post date:** [April 19, 2023, 4:58pm UTC](https://community.weweb.io/t/custom-vue-component-nested-vue-component-reference/2351/3 "2023-04-19T16:58:11Z")

</div>

Good to know! Thanks @dorilama. I was just concerned that everything had to be contained within the wwSection.vue file to be ported into weweb. Was getting issues with external vue components imports but I think that was more on my end now that I know it’s possible.

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [April 20, 2023, 7:39am UTC](https://community.weweb.io/t/custom-vue-component-nested-vue-component-reference/2351/4 "2023-04-20T07:39:15Z")

</div>

You can use any separate file as you want, you just need to have only one entry point correctly name which is using the other ones :). You can take a look at the [datagrid](https://github.com/weweb-assets/ww-data-grid) for an example.  
Only known restrictions at the moment is for static/public files.