oliverdavies.uk-old-sculpin/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md

title	excerpt	tags	draft	promoted
Rebuilding Acquia’s Dashboard with Vue.js and Tailwind CSS	How I rebuilt Acquia’s dashboard using Vue.js and Tailwind CSS.	drupal tailwind-css tweet vuejs	true	true

After rebuilding Drupal’s Bartik theme, I’ve now used Vue.js and Tailwind CSS to rebuild another Drupal related UI - this time it’s Acquia’s web hosting dashboard. Again, you can view the site on Netlify and the code on GitHub.

Why?

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.

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 - something that I had not used previously - and to organise a multi-page Vue application.

Configuring Vue Router

src/router/index.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

{
  "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

{% include 'figure' with { image: { src: '/images/blog/rebuilding-acquia-vue-tailwind/3-environments.png', alt: 'A screenshot of the rebuilt Environments page.', }, caption: 'The rebuilt Environments page for an application.', } %}

The applications page

{% include 'figure' with { image: { src: '/images/blog/rebuilding-acquia-vue-tailwind/1-applications-grid.png', alt: 'The rebuild Applications page, with applications displayed in a grid.', }, caption: 'The rebuilt Applications page - grid view', } %}

{% include 'figure' with { image: { src: '/images/blog/rebuilding-acquia-vue-tailwind/2-applications-list.png', alt: 'The rebuild Applications page, with applications displayed as a list.', }, caption: 'The rebuilt Applications page - list view', } %}

An environment page

{% include 'figure' with { image: { src: '/images/blog/rebuilding-acquia-vue-tailwind/4-environment.png', alt: 'A screenshot of the rebuilt Environment page.', }, caption: 'The rebuilt page for an environment within an application.', } %}