TODO

For the time being, I've picked out two commits as reference for the installation and configuration of RockBand.

Installation: https://github.com/thombruce/ordahhh/commit/e02e3664276e5973fa731baf35d4ecbbf32d4ffe

The installation commit runs yarn add [source] --dev to add the RockBand dev dependency, and manually references '@rockband/vue' in Nuxt's config file. It also adds three page templates, and removes the default components and page generated by Nuxt.

Configuration: https://github.com/thombruce/ordahhh/commit/b71754fdc73cdc8212a7b9828b977a79310a104d

This configuration commit does a bit more. It adds tnt.config.js, tailwind.config.js, nuxt.feed.js and a default fallback image to the static directory with ideal dimensions for OpenGraph (1920x1080). It makes numerous changes to nuxt.config.js in order to utilize the new files properly. This is a bit cumbersome. In future and with the exception of the tailwind config file, I would like to constrain modifications to a single file (maybe two: tnt.config.js and tnt.feed.js) and have the module itself do the work to merge that file with others.

Note: I also a deploy workflow to build the site on GitHub's CI: https://github.com/thombruce/ordahhh/commit/8e980c081dd420c74b0de9b15225130a4917cf6c

TODO

Installation

Vue

yarn add --dev @rockband/vue

Vue CLI

Add RockBand to your project and run the initializer:

vue add @rockband/vue

Nuxt

Add RockBand to your project:

yarn add --dev @rockband/nuxt

Add RockBand to buildModules in nuxt.config.js:

buildModules: [
  '@rockband/nuxt'
]

Setup

RockBand comes with a default layout, but you'll still need to create your own pages in Nuxt. A good place to look at how this is done is the pages directory on this very project: https://github.com/thombruce/rockband/ You can copy these to your own project, modifying their names and contents as necessary - for example by changing any instance of 'docs' to 'blog'.

Overwrite Default Styles

Create a CSS file at assets/css/rockband.css and import @rockband/vue:

@import "@rockband/vue";

/* Declare your styles or local imports here. */

RockBand comes with Tailwind CSS and PostCSS; you can count on both of them working for this file and its imports. And of course, you can just write plain old CSS.

You can also configure tailwind.config.js following their docs. Apart from the rockband.css file, it's just like any other Tailwind installation.