Setting up a new Vue.js project with Vuetify, Vuex, etc.

My latest project uses Vue.js as a framework, it has a complicated data model so I’m using Vuex, and it needs to be styled using Material Design.

This post details how I created the project.

I am a believer in vue-cli as a starting point to create any Vue project. It saves a lot of configuration time and in a few minutes I can have a working, deployable blank app. There are a number of templates that take care of different types of apps. I’ve used a few of them. I found a vue.js library that implements material design called Vuetify. It has a template that I’ll be using for this example.

One time setup


# to get vue-cli installed:
$ npm i -g vue-cli

For each new project


# Type the following and answer each of the questions below.
$ vue init vuetifyjs/webpack-advanced myproject

? Project name myproject
? Project description My Awesome Project
? Author J. Programmer <abc@example.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset none
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

vue-cli ยท Generated "myproject".

Store this in source control now!

Npm Packages

Now, open the package.json file and move all the items from dependencies to devDependencies, then install the following (you may not need all of these libraries, but most of the apps I work on eventually need them):


$ cd myproject
$ npm install
# for ajax calls
$ npm install --save-dev axios
# for date/time manipulation and formatting
$ npm install --save-dev moment
# for the model layer
$ npm install --save-dev vuex
# for Font Awesome
$ npm install --save-dev vue-awesome

Basic configuration

In /config/index.js, set autoOpenBrowser: false. This will keep a new browser session from automatically starting every time you start the dev server. I keep my app open in a browser tab the entire time it is under development, so this would just create duplicates.

Remove .editorconfig, so that it doesn’t cause errors when it doesn’t like your formatting.

In /build/webpack.dev.conf.js, change devtool: '#inline-source-map'. I was having trouble seeing the correct source code in Chrome without this. I haven’t tried to figure out why.

Favicon

Go to this site: https://realfavicongenerator.net/ and generate the favicon files. This will result in around a dozen files being generated. Put those files in static/images.

In index.html, add the code recommended by the favicon generator’s output.

Run


$ npm run dev

Navigate to localhost:8080 to see your app.

Responsive abcjs

I have been experimenting with having abcjs be responsive. Here’s my first attempt: the sheet music will change size when the area for it changes:

Try changing the browser width and see how the image reacts.

Redesigned Contracorners

I redesigned the https://contracorners.com page! The old one was about seven years old and was not very mobile friendly. I’ve been meaning to do this for a while, but haven’t had the free time in my schedule until now. I needed something to practice my new Vue.js skilled on, too.

This is now a completely static page that does a couple of ajax calls to get information from third party feeds. The old site also allowed updating the schedule, but I’m splitting that into a separate input system.

It’s also the first site I’ve designed that uses the “card” analogy. I’ve always liked the look of it, and I implemented someone else’s card design a couple of years ago and found it easy to maintain and make responsive.

Laravel/Vue.js

I’ve been exploring Laravel and Vue.js lately, and I like them so far.

I’ve created a few static sites with Vue.js and it is so easy to get productive. They are either self-contained or they get their data with an ajax call to a third-party server. It’s also a snap to deploy and there is not much strain on the server.

I’ve also done a Laravel app that is entirely Vue.js on the front end, with some /api routes that are called with ajax from the Vue.js side. It’s too early to tell how productive this setup will be. There was a surprising amount of set up involved to get the pieces working together. So, I created a starter app that I plan to use whenever I have a new Laravel/Vue.js app.

It is here: https://github.com/paulrosen/laravel-vue-starter

I hope to keep this up to date as Laravel, webpack, and Vue.js change, but I’m guessing I won’t. I will also add new features as I need them. As I’m developing this app, I’m trying to keep in mind what things I’m doing that are generic, and will move them to this project as I go.

Generating MIDI with abcjs

It’s been a while since I worked on the MIDI part of abcjs, and it shows! When Greg first developed it, he put in a widget that would use QuickTime. Pretty clever at the time. But that doesn’t work anywhere any more, so I removed it. I have some plans for generating MIDI right on the web page, but that will have to wait until the next version.

For this version I concentrated on making the MIDI generation better.

I refactored the generation to use three passes: 1) identify the parts of the abcjs object that affect sound and put them in chronological order, 2) Turn those conceptual events into specific events, 3) generate MIDI. That made it much easier to add features: all of the “artistic” stuff is in the second step.

The two main features I added were guitar chord generation and grace notes. Both of those required some artistic license.

I tried to find a rule of thumb for how long a grace note is, but there really isn’t one. It depends on the style of music whether the grace note is before the beat or on the beat. The length of a grace note is variable. It is unclear whether it should be a fraction of a beat or a fixed amount of time, independent of the tempo. I just picked something that seemed to work for me.

For guitar chords, in general I wanted to do a boom-chick pattern, but that depended on where the chords were specified in time. This can be vague and differs for different meters. So if boom-chick didn’t work, I played the full chord on the beat. If a chord appears between beats, I pulled it back to the previous beat. This seems to have worked passably for the sample tunes I tried. It’s just that the specification is not very exact, so there’s no way of telling for some of the border cases.

In any case, the result was surprisingly good on some tunes! There is room for improvement and there are many decorations, MIDI commands, and rhythm designations to support to keep me busy for the next version.

And, when it comes down to it, MIDI is never going to sound “good”. The purpose of MIDI is as a proof-reader of the music you create. It’s just hard to stop refining it once I get going.

Money Lost:

Sheet Music in WordPress!

I created a WordPress plugin called “ABC Notation” that makes it easy to put sheet music in your blog. It uses the abcjs JavaScript library developed by Greg Dyke and me. Here’s an example of how it works:

The above music was created with this shortcode:

[.abcjs engraver="{ staffwidth:550 }"]
X: 36
T:Money Lost
M:3/4
L:1/8
Q:3/4=40
C:Paul Rosen
S:Copyright 2007, Paul Rosen
R:Klezmer
K:Dm
Ade|:"Dm"(f2d)e gf|"A7"e2^c4|"Gm"B>>^c BA BG|"A"A3Ade|"Dm"(f2d)e gf|
"A7"e2^c4|"Gm"A>>B "A7"AG FE|1"Dm"D3Ade:|2"Dm"D3DEF||:"Gm"(G2D)E FG|
"Dm"A2F4|"Gm"B>>c "A7"BA BG|"Dm"A3 DEF|"Gm"(G2D)EFG|"Dm"A2F4|
"A7;(Edim)"E>>Fx "(A7)"ED^C2|1"Dm"D3DEF:|2"Dm"D6||
[/abcjs]