Vue front-end guide

Hi I am revisiting dfinity after a few months. It didn’t seem quite ready then but appears to be more usable now. In looking on forum and dev site I don’t see any current content on using a vue front-end.

If anybody can point me to or construct a brief guide or let me know if its in the works that would be great. Much appreciated

I tried basically making the hello tutorial then ran vue create . in main hello directory. The dragged all the normal vue stuff into the hello_assets like that is the normal vue app parent. I still have standard index.html and index.js in there but dont think should be used. I changed frontend entry point in dfx.json to

 "frontend": {
    "entrypoint": "src/hello_assets/public/index.html"
  },
"source": [
     "src/hello_assets/src/assets",
     "dist/hello_assets/"
 ],

and idk added .vue to one of the things in webpack.config.js then ran dfx build and looks the same. Idk. I still have default vue setup nothing to interact with canister

here is GitHub of what I have https://github.com/24jr/hello-vue

Side note and personal critic. Call me crazy but I feel like this would take 30 mins for some dfinity person to layout for us in docs and create easy onboarding and more adoption

This may actually be touched on in here https://forum.dfinity.org/t/vuejs-boilerplate/1923 @kpeacock but not 100% sure or if its up to date with latest stuff

Good to see you again jar! If it’s useful @Tbd now has a brilliant create-ic-app tool for generating starter templates:

2 Likes

Good to be back and thanks for showing this! Going to look into it and may work well for now, though, idk I feel like long term I would rather straight up do vue create with all my presets or maybe can do that in here going to try it out. Maybe it’s not so easy to setup with vue or something and that’s why not much on it but who knows I just assumed it would be relatively easy to do. Thanks!

1 Like

Also I must add that I’ve been a tried and true Vue guy but after seeing the word svelte a bunch over the last few months and now here I’m finally googling it and am quite intrigued…

FYI create-ic-app is based on ViteJS which is made by Evan You (creator of Vue). vue create uses webpack, which is being phased out, and Evan isn’t working on it anymore afaik. Thats frontend for you :grinning_face_with_smiling_eyes:

1 Like

Oh yeah I was using vite a bunch when it first came out and felt cleaner and simpler to me. I’ve never really understood what webpack and bundler this and that all do tbh still have no clue outside of the code I need to write. But I thought my boss at work made a comment like vite is just for fast dev but you still need a compiler or I forget what word it was when actually build and I was like wait so I dont get it it’s faster dev because its already instant and then I just switched back to normal vue cli again.

But yeah I think I remember reading something from Evan about him having an idea about not needing web pack and staying up all night making v1 of vite. I spent the day learning the basics of svelte now and I guess svelte-kit. Tutorial seemed fun, didn’t retain and understand every detail but got the gist, and then just did the svelte-kit starter app and all the stuff together in that code is well – I need to sleep on it haha was overwhelming all put together. There is a lot going on. Harder on the eyes than Vue for sure but I’m tempted to really give svelte a go it seems cool

I think I saw svelte-kit mention something about vite actually as well in its June update so idk how all that behind the scenes stuff works but must work together somehow

2 Likes

Your boss is wrong haha! Webpack and other bundlers are used to reduce the size of the final page. they minify and do other stuff to achieve this. Vite also does this when you use the npm run build command, but it uses rollup (another similar tool) which can result in smaller sizes than webpack.

When you are just running the npm run dev it skips that however, because its completely unnecessary for development. That’s why its so fast, and provides a better experience.

Svelte does seem pretty good yeah. Its what I recommend to beginners, despite being into React myself. And yeah svelte-kit is using Vite under the hood :slight_smile:
Good luck!

1 Like

Haha back to vite it is then. But I seriously may be persuaded to switch to svelte even though I love vue and feel like I’m an expert working with it and can do anything with it lol which is fun and a great feeling. It was a tell tail sign that svelte is made by beauties when the svelte-kit starter app has a webp logo as the main logo.

Yesterday I was planning on being full dfinity day front-end and backend app. Well didn’t go way I expected it to take me but I liked it

1 Like

Check out Awesome DFINITY: GitHub - dfinity/awesome-dfinity: A curated list of awesome projects and resources relating to DFINITY and the Internet Computer