diff --git a/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md b/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
index 06bd0738..9d4644b5 100644
--- a/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
+++ b/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
@@ -12,9 +12,104 @@ After [rebuilding Drupal’s Bartik theme](/blog/rebuilding-bartik-with-vuejs-ta
## Why?
-The same as the Bartik rebuild, this was a good opportunity for me to learn more about different technologies
+The same as the Bartik rebuild, this was a good opportunity for me to gain more experience with new technologies - Vue in particular - and to provide another demonstration of how Tailwind CSS can be used.
-vue router
+Like the Bartik clone, this was originally going to be another single page rebuild, however after completing the first page I decided to expand it to include three pages which also gave me the opportunity to use [Vue Router](https://router.vuejs.org) - something that I had not used previously - and to organise a multi-page Vue application.
+
+## Configuring Vue Router
+
+`src/router/index.js`:
+
+```js
+import Vue from 'vue'
+import Router from 'vue-router'
+import Applications from '@/views/Applications'
+import Environment from '@/views/Environment'
+import Environments from '@/views/Environments'
+
+Vue.use(Router)
+
+export default new Router({
+ routes: [
+ {
+ path: '/',
+ name: 'applications',
+ component: Applications,
+ },
+ {
+ path: '/:id/environments',
+ name: 'environments',
+ component: Environments,
+ props: true,
+ },
+ {
+ path: '/:id/environments/:environmentName',
+ name: 'environment',
+ component: Environment,
+ props: true,
+ }
+ ]
+})
+```
+
+## Passing in data
+
+`src/data.json`
+
+```json
+{
+ "applications": {
+ "1": {
+ "id": 1,
+ "name": "Rebuilding Acquia",
+ "machineName": "rebuildingacquia",
+ "type": "Drupal",
+ "level": "Enterprise",
+ "environments": {
+ "dev": {
+ "name": "Dev",
+ "url": "dev.rebuilding-acquia.com",
+ "label": "develop"
+ },
+ "stage": {
+ "name": "Stage",
+ "url": "stg.rebuilding-acquia.com",
+ "label": "master"
+ },
+ "prod": {
+ "name": "Prod",
+ "url": "rebuilding-acquia.com",
+ "label": "tags/2018-12-21"
+ }
+ },
+ "tasks": [
+ {
+ "text": "Commit: fdac923 Merge branch 'update-password-policy' refs/heads/master",
+ "user": "system",
+ "times": {
+ "display": "Dec 19, 2018 3:48:29 PM UTC +0000",
+ "started": "Dec 19, 2018 3:48:29 PM UTC +0000",
+ "completed": "Dec 19, 2018 3:48:29 PM UTC +0000"
+ },
+ "loading": false,
+ "success": true
+ }
+ ]
+ }
+ }
+}
+```
+
+## The Environments page
+
+This was the first page that I rebuilt - the Environments page for an application that shows the information of the different configured environments.
+
+Vue Router is configured to show the
+
+
+
+ The rebuilt Environments page for an application.
+
## The applications page
@@ -23,13 +118,6 @@ vue router
The rebuilt Applications page.
-## The environments page
-
-
-
- The rebuilt Environments page for an application.
-
-
## An environment page