A simple way of getting to know the Vue Javascript framework
(Disclosure: this may work for me but not for others, see the bottom of this piece for why.)
Vue is one of the larger and more popular Javascript frameworks.
It is very versatile and has great documentation. It can be used in different ways, either using Single File Components or as a library. It supports different API styles (options or composition) and offers a range of build tools. If you want to learn Vue, there is the Guide, the Quick Start and the Tutorial.
In other words, there are a ton of resources for beginners and quite frankly, when I tried to start learning Vue a couple of weeks ago, it was too much. I could not see the forest for the trees.
And by that I mean: I failed to start making even the simplest of applications in Vue.
So here is what I ended up doing:
(The underlying assumption being that you, like I, already know the 3 web technologies of HTML, CSS and Javascript.)
- Follow the exercises in the Tutorial.
- Create a minimal app in the Playground.
- Hello World suffices, but if you want to see if you can make something more complex, you can do that too.
- Download your prototype from the Playground (button: Download Project Files).
- Download and install node.js.
- CD to your project files.
- npm install
- npm run dev
This is more or less the same procedure as the one outlined in the Quick Start section of vue.js. That section, however, tripped me up, because it produced a more than minimal app, and as such it didn’t give me a very good idea of what a minimal Vue app looks like. (The Quick Start app might help to provide some contrast though, I am certainly not saying that it is useless.)
I ended up scooping out the parts I did not need from the Quick Start app, but this left me with a broken app. I needed a gentler start, something that would let me put “Hello World” on the screen without having to worry about a ton of other things.
The tutorial let me do exactly that, but it would not let me save the results as an app.
The Playground would.
In fact I still use the Playground even now that I am working on my own app, just to quickly try out things that don’t work in my (currently) 550-line (and counting) app.
Note that if you use Vue as a library you end up with none of these problems and quite frankly, to each their own. I personally liked the workflow from the Tutorial (Single File Components and Composition API), so I tried to recreate that.
Pet peeve: people asking Vue questions on Stack Overflow without reducing their code to the minimum required to reproduce their problem.
Discussion: note that the Vue Playground only uses the Composition API at the time of writing. This is a fairly recent API: if I am not mistaken, it was introduced a little under 3 years ago. If you had tried Vue before or already have some Vue experience, this might not be the way for you.
Leave a Reply