Serving Custom Vue Frontend

Developers Programs & Applications
1

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!

1 Like
2

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

I’ll hack on that after work.

Would still love to hear some other ideas!

1 Like
3

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.

2 Likes
4

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

1 Like
5

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

Check this commit changes: 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

6 Likes
6

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

This part, would have tripped me up for sure!

1 Like
7

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

Found out this code snippet on linkedup

4 Likes
8

Well spotted! ; ) That’s the one.

1 Like
9

nice, very usefull, thx

1 Like
10

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

11

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

12

Thank you. I found this → GitHub - MioQuispe/create-ic-app which is killer

4 Likes
13

This is a great project :+1: