Yet Another Update to my INeedIt Vue.js App

This is the last update to my INeedIt app - I promise. At least until I get another idea or two for a good update. But then that will be the last one - honest. (Ok, probably not. ;) Before I begin, be sure to read the first post about this demo and the update from a few days ago. The last update was relatively minor. This one is pretty radical.

One of the things I ran into when working on this app was that my app.js file was getting a bit large. To be clear, 260 lines isn’t really large per se, but it gave me a slight code smell to have my components and main application setup all in one file. I especially didn’t like the layout portions. While template literals make them a lot easier to write, having my HTML in JavaScript is something I’d like to avoid. Heck, just the lack of color coding is a bit annoying:

The solution is single file components. As you can guess, they let you use one file per component. Here is a trivial sample.

Each single file component (SFC) may be comprised of a template (layout), script (logic) and style (design) block.

So this is cool - however - using this form requires a build process of some sort. I’m definitely not opposed to a build process, but I was a bit hesitant to move to one for Vue. I loved how simple Vue was to start with and I was concerned that moving to a more complex process wouldn’t be as much fun. Plus, I found the docs for SFC to be a bit hard to follow. In general, I love the Vue docs, but I was a bit loss in this area as it assumes some basic familiarity with Webpack.

When I first encountered this, I stopped what I was doing and tried to pick up a bit of Webpack. I ran across an incredibly good introduction on Smashing Magazine: Webpack - A Detailed Introduction. This gave me enough basic understanding to be a bit more familiar with how to use it with Vue. I still don’t quite get everything, but I was able to build a new version of the app using SFCs and the Webpack template.

To begin working with the Webpack template, you need the Vue CLI. The CLI is a scaffolding and build tool. You can install it via npm: npm i -g vue-cli. Then you can scaffold a new app via vue init webpack appname. This will run you through a series of questions (do you want to lint, do you want to test, etc), and at the end, you’ve got a new project making use of SFCs.

The new project is a bit overwhelming at first. Maybe I just suck, but it was rather involved. You’ve got a built in web seerver, auto reload, and more, but in the end it felt much like working with Ionic. I’d edit a file and Webpack would handle all the work for me.

So how did I build INeedIt in this template? The template has a main App component that simply creates a layout and includes a router-view. As I learned earlier this month, that’s how the Vue router knows where to inject the right component based on the current URL. I removed that image since I didn’t have anything that was always visible.

And that was it! Ok, I lie. When I made my app I accepted the defaults for ESLint and it was quite anal retentive about what it wanted, which is to be expected, but I disabled a lot of the rules just so I could get my initial code working. In a real app I would have kept the rules.

I got to say… I freaking like it. I still feel like it’s a big step up from “just include vue in a script tag”, but as I worked on the app it was a great experience. If you want to see the final code, you can find it here: https://github.com/cfjedimaster/webdemos/tree/master/ineedit3

Take a look at the dist folder specifically. This is normally .gitignore’d, but I modified the settings so it would be included in the repo. You’ll see that Webpack does an awesome job converting my code into a slim, optimized set of files. You can actually run the demo here: https://cfjedimaster.github.io/webdemos/ineedit3/dist/index.html

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos.
If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.