I have created a tutorial “Building a web application with Vue”. 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 frondend 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. 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). 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
- I want to provide my colleagues with a stepping stone – not the ones many who are well versed in Vue, but the ones who like me would like to make a first in road in modern web application development but do not really know how and where to start; I have used this tutorial in a Conclusion Code Café session on August 22nd with a small number of nice colleagues who I may have converted to Vue enthusiasts
Is this the best Vue tutorial out there? Not by any standard. I think it is useful, it gets you going in a very pragmatic way and it prepares you for more thorough, advanced tutorials and the documentation and books that explain how things really work.
What makes it interesting?
- focus on getting the important things to work you want in a web application
- not on the theory behind it, not on corner cases and advanced situations
- no time is spent on comparing with earlier release of Vue or with other mainstream frameworks
- all you need is some HTML and JavaScript skills
- no prior knowledge of Vue or other reactive web frameworks is required (or even desired)
- there is no need to install anything: the tutorial uses development environments that run in your browser (Vue playground, StackBlitz, Gitpod.io)
- in 3-4 hours, you will have a simple Vue web application running with most of the key concepts applied (most notable exception is routing); the final application is live on GitHub Pages here. The final step in the tutorial is “how to publish the Vue application to the world on your own GitHub pages environment”
