Serving Custom Vue Frontend

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

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

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

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

1 Like

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

5 Likes

@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

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

Found out this code snippet on linkedup

4 Likes

Well spotted! ; ) That’s the one.

1 Like

nice, very usefull, thx

1 Like