Walkthrough of Vue example app?

[veeral-patel]

Would be nice, especially for beginners, to write a guide walking through how this app was built.

Reading the source code is great for people who are more advanced, but by having a guide, we can also reach beginners.

[igeligel]

I think it would be more viable to write some blog posts or something about it which get mirrored here somehow.

I also think this repository is a good example of how to do something in a bigger Vue.js application but still lacks some other stuff. I will look into this. Unfortunately, i have other projects to do also 👍

Maybe someone can start with some simple Vue.js blog or link to useful resources in the readme here.

[gamugamu]

Yes, this could be great. Maybe you can help: I have set a backend flask real world project with this vue frontend. I have set up the api url points to my backend. When I try to create an account, nothing happen. The view keep displaying the forms with no errors and my back server send me "OPTIONS /api/users HTTP/1.1" 200. So it's seems to be ok. My question is: How can I check that my backend is correctly setted to fit my vue server? I didn't found any documentation on how to check that the backend server is correctly working from the front end point. If i turn on / off my backend, I should expect conduit being a nice guy and tell there is a problem. So what should I do?

[partap]

I've been looking through the code for a while trying to trace from the beginning but I'm lost.
Maybe it's the webpack stuff, but there's some unexplained magick going on in the config.

I've got a few questions:

Starting from yarn serve, it seems to be serving a (modified) version of public/index.html. This file has somehow injected /app.js, which appears to be the compiled output of src/main.js.

So is everything here just handled by defaults? I haven't used vue or webpack before, so forgive me if this is common knowledge. Looking at the docs for vue-cli-service, it seems to be a wrapper around webpack... vue-cli-service appears to be very configurable using vue.config.js or webpack.config.js, but there are no such files.

There's a babel.config.js file, which just refers to a preset: "@vue/app", which doesn't appear to correspond to any file or npm module in the project.

So somehow, using only a magic preset string, vue-cli-service knows to compile src/main.js with babel, output it to app.js, inject that into a script tag in public/index.html, and serve that file?

That's all fine...wonderful default behavior, even... but is this all documented somewhere? Is it configurable? What if I want to modify the chain to use pug instead of raw html, for instance? I've looked in docs for vue-cli-service, webpack, and @vue/cli-plugin-babel so far with no luck.

[championswimmer]

I have made the same project from scratch (the code structure won't be exactly the same, but it is roughly the same app)

I have recorded the entire process of building it. It is here https://cb.lk/realworld/vue

If this project wants to use this video tutorial in any way, feel free to.