Tutorial: Building a simple Web Application with Vue (for absolute beginners)-focus on result and fun
--
I have created a tutorial “Building a web application with Vue” for the Conclusion Code Café (August 2023). You will find it here in a GitHub Repo.
It is targeted at people who — like me six weeks ago — have no experience with Vue or possibly any other reactive frond end framework (React, Angular, Svelte) but who do have some HTML and JavaScript skills and who would like to create a modern web application. I believe this tutorial answers most of the early questions you will have and guides you through the most interesting concepts and features in Vue that you will want to start using from the outset.
Note: the tutorial is accompanied by this slide deck — containing further visual introductions of the concepts discussed in the tutorial.
A little history: I wanted to create a simple web application that publishes a calendar of all technical knowledge events anywhere in my company (Conclusion, an ecosystem of 30 autonomous companies) — to make these sessions more accessible to the over 2500 colleagues who work in all these companies. After hearing quite some positive sentiments around Vue, I decided to simply get going. I read up on Vue, started creating my application step by step, adding child components, events and handlers, state, reactivity and a rich components library as I needed them, I ran into several roadblocks — things I did not understand or could not immediately get to work. This tutorial is based on that experience and created right after I managed to get things to work and to understand enough to get to work. I am not a Vue expert — I am the novice who has had the first initiation. And that makes me the best possible guide for others who want to take that first step.
Why did I create it?
- I really liked my first experiences with Vue and I want others to have that same joy and feeling of accomplishment I had
- I know that by trying to turn my first experiences into a tutorial, I will better learn and understand myself what I have been doing; I force myself to better explore and document what I have pieced together from documentation, blog articles, ChatGPT, StackOverflow and other sources