# Serving Custom Vue Frontend

**URL:** <https://forum.dfinity.org/t/serving-custom-vue-frontend/1129>\
**Category:** Programs & Applications\
**Created:** [August 26, 2020, 4:35am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129 "2020-08-26T04:35:54Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [August 26, 2020, 4:35am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/1 "2020-08-26T04:35:54Z")

</div>

Maybe someone can point me in the right direction.

I’m trying to get a canister to serve a VueJs frontend but I’m feeling quite lost.

I’ve setup webpack to build and drop the minified sources in my dist folder and I verified the bundles find their way into the assets folder in it’s canister.

Currently, I have my entrypoint pointing to a javascript file which serves the bundled index.html to the user. However, since I’m not quite able to figure out how to send the bundled index.js as well it doesn’t work.

Anyone have any thoughts? Thanks!

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [August 26, 2020, 1:25pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/2 "2020-08-26T13:25:43Z")

</div>

After sleeping on it I’m fairly sure I can get this to work by doing something like this

> <https://stackoverflow.com/questions/58274001/vue-cli-combine-build-output-to-a-single-html-file>

I’ll hack on that after work.

Would still love to hear some other ideas!

---

<div class="post-metadata">

**Author:** ![Ori](https://avatars.discourse-cdn.com/v4/letter/o/ecae2f/32.png) [@Ori](https://forum.dfinity.org/u/Ori)\
**Post date:** [August 26, 2020, 2:22pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/3 "2020-08-26T14:22:08Z")

</div>

I’m not sure how Vue does things, but have you checked you’re populating the “app” html tag the same way the tutorial examples do?

There’s a bootstrapped html page served that has an `<app id=“app”>` tag. This is the parent dom node you want to populate, regardless of the framework used.

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [August 26, 2020, 2:44pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/4 "2020-08-26T14:44:47Z")

</div>

Thanks @Ori, I actually wasn’t aware of that!

---

<div class="post-metadata">

**Author:** ![dpdp](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/dpdp/32/1143_2.png) [@dpdp](https://forum.dfinity.org/u/dpdp)\
**Post date:** [August 26, 2020, 5:13pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/5 "2020-08-26T17:13:34Z")

</div>

Here is an example of vuejs dfinity project (maybe I included a bit too much of package…)

> **[davidp94/vue\_examples\_frontend\_dfx](https://github.com/davidp94/vue_examples_frontend_dfx)**
>
> dfinity project with vuejs front-end. Contribute to davidp94/vue\_examples\_frontend\_dfx development by creating an account on GitHub.

Check this commit changes: [https://github.com/davidp94/vue\_examples\_frontend\_dfx/commit/7bed09a23e45bdb6aa9e47f814c1416b3ac89621](https://github.com/davidp94/vue_examples_frontend_dfx/commit/7bed09a23e45bdb6aa9e47f814c1416b3ac89621)

vuetify and ant design (antdv) work well, vuex and vue-router too.

Note : you need to access the `_assets` canisterId to have access to your front-end

---

<div class="post-metadata">

**Author:** ![Steve](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Steve](https://forum.dfinity.org/u/Steve)\
**Post date:** [August 26, 2020, 5:56pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/6 "2020-08-26T17:56:00Z")

</div>

@dpdp, this is a huge help, thank you so much. Excited to try this out!

[This part](https://github.com/davidp94/vue_examples_frontend_dfx/blob/7bed09a23e45bdb6aa9e47f814c1416b3ac89621/src/vue_example_dfx_assets/public/index.js#L11), would have tripped me up for sure!

---

<div class="post-metadata">

**Author:** ![dpdp](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/dpdp/32/1143_2.png) [@dpdp](https://forum.dfinity.org/u/dpdp)\
**Post date:** [August 26, 2020, 6:03pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/7 "2020-08-26T18:03:32Z")

</div>

Yeah it did take some time to me to find this trick.

Found out this code snippet on linkedup

> <https://github.com/dfinity-lab/linkedup/blob/master/src/linkedup/public/main.js#L23-L26>

> <https://github.com/dfinity-lab/linkedup/blob/master/src/linkedup/public/utils.js#L1>

---

<div class="post-metadata">

**Author:** ![Ori](https://avatars.discourse-cdn.com/v4/letter/o/ecae2f/32.png) [@Ori](https://forum.dfinity.org/u/Ori)\
**Post date:** [August 26, 2020, 7:17pm UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/8 "2020-08-26T19:17:46Z")

</div>

Well spotted! ; ) That’s the one.

---

<div class="post-metadata">

**Author:** ![dushaobin](https://avatars.discourse-cdn.com/v4/letter/d/db5fbb/32.png) [@dushaobin](https://forum.dfinity.org/u/dushaobin)\
**Post date:** [November 25, 2020, 2:11am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/9 "2020-11-25T02:11:40Z")

</div>

nice, very usefull, thx

---

<div class="post-metadata">

**Author:** ![apotheosis](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/apotheosis/32/24516_2.png) [@apotheosis](https://forum.dfinity.org/u/apotheosis)\
**Post date:** [June 3, 2021, 7:27am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/10 "2021-06-03T07:27:08Z")

</div>

I just tried your repo with dfx0.7.0. It just shows ‘Vue app loading’ and does not load… Any ideas?

---

<div class="post-metadata">

**Author:** ![dpdp](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/dpdp/32/1143_2.png) [@dpdp](https://forum.dfinity.org/u/dpdp)\
**Post date:** [June 3, 2021, 8:08am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/11 "2021-06-03T08:08:30Z")

</div>

Yes there has been breaking changes since then; It should be similar to using a regular vue app;

---

<div class="post-metadata">

**Author:** ![apotheosis](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/apotheosis/32/24516_2.png) [@apotheosis](https://forum.dfinity.org/u/apotheosis)\
**Post date:** [June 3, 2021, 8:35am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/12 "2021-06-03T08:35:07Z")

</div>

Thank you. I found this → [GitHub - MioQuispe/create-ic-app](https://github.com/MioQuispe/create-ic-app) which is killer

---

<div class="post-metadata">

**Author:** ![dpdp](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/dpdp/32/1143_2.png) [@dpdp](https://forum.dfinity.org/u/dpdp)\
**Post date:** [June 3, 2021, 11:16am UTC](https://forum.dfinity.org/t/serving-custom-vue-frontend/1129/13 "2021-06-03T11:16:01Z")

</div>

This is a great project 👍