New Project! Getting Started With Vue

March 29, 2020

I’ve started a new project! Technically I started it a month ago, but today I’m introducing it to this blog 😄.

For a little over a year now I’ve been doing weekly check-ins with myself to reflect on things I want to work on on a week-by-week basis, and to keep myself accountable to making progress. It’s a way to keep reminding myself of long-term goals, and a way to break big goals down into actionable steps so that I actually do them. Since I started this, I’ve written the check-ins as comments on a Trello card, and a year in I wanted a better way to do this.

Why? Sometimes I want to look back on older check-ins to compare, and at a certain point it just gets to be a lot of scrolling. Also if I want to review the same question from multiple weeks, it’s just annoying to find them. I thought I could make an app which stores my answers to the check-in questions in a more organized way, which would make reviewing them a lot easier.

I also thought it would be a good opportunity to get some practice building an API and SPA—most of the apps I’ve worked on a lot up until now have either been shallow demo SPA projects that I don’t really care about that much, or full-blown server-rendered monoliths. This project would give me a chance to build ‘just an API’ and ‘just a front end’ which seems to be the way a lot of the world builds the internet these days!

I’ve been calling it project JFM, an acronym for “just for me” as a reminder to keep the scope small and only focus on the bare minimum I need for my own use of the app.

Getting Started With Vue

I also thought this project would be a good opportunity to try my hand at Vue since all of the front-end demo projects I’ve done until now have been with React. I know React is super cool (or at least that’s what the cool kids say 😂) but actually working with it, I haven’t really been convinced by all the hype. Maybe I’m missing something…only one way to find out! I’ve now finished a REST API for all of the things I’ll need in this app, so time to get started on the front end.

Here are the links I’ve used to kick things off:

Here are some other video courses I’ve come across which may be useful in the future:

Vue + TypeScript

I also thought this app could be a good way to get some practice with TypeScript, which I got an intro to a few weeks ago:

  • Here’s a video intro’ing TypeScript particularly with Vue (note: it demos using Classes in Vue, which has been phased out).
  • This series is a tutorial similar to Traversy’s above, but implementing TypeScript
  • This video demonstrates a basic Vue app, comparing the vanilla JS way, the Class way, and the TypeScript way

Installation

To install Vue:

npm install -g @vue/cli

The main tutorial I’m doing this with showed a cool demo of Vue UI so I thought I’d try it out. So next step to create the actual Vue app is to invoke it:

vue ui

…and then create a new project. This walks you through a bunch of steps; I did:

  • named the client app ‘client’ making sure I’m in the app’s parent folder
  • selected npm as my package manager (it’s the default I later learned…not necessary to change)
  • unticked the option to create a git repo…it’s already in a git repo
  • chose a manual preset in order to be able to add TypeScript
  • added TypeScript as an enabled feature
  • unticked the option to use class-style component syntax
  • chose which ESLint option to install (‘error prevention only’ to go the minimal style, but whatever option is comfortable is fine)
  • Create Project!

It took a while to install, but created the app in the end. Then you can run it from the UI in the Tasks tab, and clicking serve then Run task. Otherwise run npm run serve (assuming npm) from the command line in the client directory.

For the first time it will take a little while for the build to complete, but when it does you can visit the app at localhost:8080 (or just click the **Open app button in the CLI). Also not a bad idea to git commit the installation here before making any customizations.

A few initial things I noticed using the UI tool…

  • To see the console output (including any runtime errors), open Tasks –> Output
  • Without doing anything to the default app, the initial bundle size is over 2MB!? This should be addressed. Hopefully it’s just the size of the codebase, not the output app bundle.

Vuetify

To speed up the fruition of this app I’m using the CSS framework & component library Vuetify which is a Vue implementation of Material Design. This can be added from the Vue GUI:

  • Go to the Plugins tab
  • Click ‘add plugin’
  • Search for *vuetify and then click vue-cli-plugin-vuetify when it comes up, and install it
  • Leave the default preset and the click Finish installation and let it do its installation magic

Vue Basics

Every Vue component is made up of three basic building blocks:

  • <template></template> — Vue-ified HTML of how the component should actually be structured
  • <script></script> — import and export each component
  • <style></style> — style the bad boy

One important thing to note about the style element: adding the scoped attribute limits CSS to this component only:

<style scoped>
  h3 { margin: 40px 0 0; }
</style>

My Vue Learning Demo Repos

Tags icon Stacked price tag looking things Tags: