After a brief detour exploring Vite's support for legacy browsers like IE11, I returned to learn more about Vue.js from its own tutorial. Vue advertised itself as flexible in many ways and this is immediately visible on the first page of the tutorial: in the upper left corner we have two choices to make. Options vs. Composition API, and HTML vs. SFC format. Combined, it implies the tutorial can show us how to use Vue four different ways and would be a great resource for some direct comparisons.

SFC format integrate a component's HTML template, CSS, and JavaScript/TypeScript all in a single *.vue file. These files are processed by a build-time tool like Vite to generate files actually going into a browser. In contrast, the HTML format is intended for using Vue without build tools. All of Vue is linked from the HTML and all script lives in the HTML as well for direct browser consumption.

Options API is the format used by Codecademy's Vue.js course as well. It imposes a particular organization to Vue component data. Composition API does not impose such structure and so the JavaScript can be organized however you like but it also comes with requirement for managing overhead we wouldn't have to worry about with Options API. In terms of expressive power, Options API is implemented using Composition API. Meaning anything we can do with Options we can do with Composition, but the reverse is not necessarily true.

For my first pass, I will leave things at default recommended for Vue beginners: Options API in SFC format. This tutorial is very short, with just 15 sections. Or more accurately 13 sections when accounting for the fact not much material is covered by the first page introduction or last page conclusion. The implementation structure is an in-browser learning environment similar in concept to Codecademy's learning environment. The upside is that we don't have to set up a local development environment, the downside is that we don't get to see how a Vue development environment would look.

Vue's tutorial covers a few important concepts with some overlap with Codecademy's course (interpolation, directives, data/computed/method/watch) and some areas are different. It didn't get into forms as Codecademy did, but did get into componentization, lifecycle hooks, and props/emits/slots which Codecademy's course did not.

Both of those are shallower and more superficial than something like Angular's "Tour of Heroes" tutorial, which went into far more depth starting with setting up a local development environment. If I want a Vue tutorial with that level of depth I will have to look elsewhere. Still, they were instructive and I'm glad I've gone through both Codecademy's course and Vue.js tutorial. They prepared me to go deeper with Vue documentation starting with the "Essentials" section.

One tangential item I learned from this tutorial is the site https://jsonplaceholder.typicode.com/ for a publicly accessible free static mockup of generic API endpoints returning ipsum lorem data. This could come in handy for my own experiments in the future.