Making My First PWA With Vue

tldr; I made a chess app using Vue. Overall Vue impressed me. Making the page into a PWA was surprisingly painless.

With some of the recent hoo har about React’s licensing situation, I decided that it was a fine time to look into alternatives - the major player being the shiny new VueJS.

Vue appealed to me for a few reasons:

• It’s lightweight. Not just in size, but in API complexity.
• It’s standalone. Just drop one script into the page and get going - no react+react-dom+babel (I understand that one doesn’t need these three, but in practice they’re what everyone uses).
• It has really good documentation.
• And of course, the license situation is a whole lot better.

So, getting started, I wanted to keep things as simple as possible. That meant no build systems, just a <script> tag in my page. Of course, looking back, I’m kicking myself for this decision - I missed out on all the goodness of Single File Components.

Coming from a React-ey perspective, I found Vue’s component concept familiar, with a few small adjustments to the names of things. The biggest learning curve was Vue’s template syntax, which felt verbose and clunky compared to JSX.

I know that it’s possible to use JSX with Vue, but partly for learning purposes, and partly because of the afore-mentioned lack of a build step in my chosen workflow, I trundled on with what Vue gave me out of the box. In the end I didn’t mind it so much - it’s just something to get used to and once you know the big three (v-bind:, v-if: and v-on:), life tends to get easier.

I’ve seen it mentioned that doing more complex templating is difficult with Vue’s syntax, but when (for example) I wanted to display a filtered list, it felt fairly natural to make a new computed property called listWithNoXs.

A personal pain point for me was the styling. There is no Radium equivalent (that I could find) for Vue, which for me meant that my styles were split between the components (most of the styles), and a CSS file (for styles with pseudo-selectors). I believe that Single File Components would fix this, but it would be nice if there was some other way - I’m imagining something like:

 <a v-bind:style="styleA" v-bind:style:hover="styleB">

Overall though, I got a very favorable impression of Vue. It leaves the odd feature to be desired, but in the end it’s just a tool - it’ll never be perfect, but if it does the job and you use it enough, you’ll learn to love it just the same.

Lastly, I want to mention the process of turning this website into a fully fledged Progressive Web App. In this case, it was all pretty simple, even for a first timer like me. Because I had bundled the P4WN chess engine with the page, there was no backend I had to worry about caching requests for.

Basically, I copied some example Service Workers to cache my files, and wrote a manifest.json. After some testing with Lighthouse to winkle out some accessibility issues, I was set!

You can visit my app here - any problems, feel free to file an issue on the GitLab or Github repositories!