132 lines
4.1 KiB
Markdown
132 lines
4.1 KiB
Markdown
---
|
||
title: Rebuilding Acquia’s Dashboard with Vue.js and Tailwind CSS
|
||
excerpt: How I rebuilt Acquia’s dashboard using Vue.js and Tailwind CSS.
|
||
tags:
|
||
- drupal
|
||
- tailwind-css
|
||
- tweet
|
||
- vuejs
|
||
draft: true
|
||
---
|
||
After [rebuilding Drupal’s Bartik theme](/blog/rebuilding-bartik-with-vuejs-tailwind-css), I’ve now used [Vue.js][vue] and [Tailwind CSS][tailwind] to rebuild another Drupal related UI - this time it’s [Acquia’s](https://www.acquia.com) web hosting dashboard. Again, you can [view the site on Netlify][netlify] and [the code on GitHub][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](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
|
||
|
||
<figure>
|
||
<img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-grey-light p-2">
|
||
<figcaption>The rebuilt Environments page for an application.</figcaption>
|
||
</figure>
|
||
|
||
## The applications page
|
||
|
||
<figure>
|
||
<img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-grey-light p-2">
|
||
<figcaption>The rebuilt Applications page.</figcaption>
|
||
</figure>
|
||
|
||
## An environment page
|
||
|
||
<figure>
|
||
<img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-grey-light p-2">
|
||
<figcaption>The rebuilt page for an environment within an application.</figcaption>
|
||
</figure>
|
||
|
||
[github]: https://github.com/opdavies/rebuilding-acquia
|
||
[netlify]: https://rebuilding-acquia.netlify.com
|
||
[tailwind]: https://tailwindcss.com
|
||
[vue]: https://vuejs.org
|