Dashboarding with Nuxt

# Overview

As a preamble you may read the introductory Dashboarding with Nuxt/vue medium article.

# Motivation

The nuxt-dashboard-template github repo contains is Nuxt-based sample single page application (SPA) meant to ease the building of dashboards by engineers who, like me, are not non professional web developers.

Its layout features:

  • A top bar - typically with organization logo and menu
  • A footer - typically with contact info
  • A main area organized in a 2-level tab structure:
    • Top level tabs on the left
    • Sub-tabs at the top

See the demo dashboard - vuetify version.
Or git clone and run locally - bootstrap version. See Get Started section.

1st level tabs: Left - 2nd level tabs: Top
Sample tab

As opposed to many existing solutions typically wrapping Javascript in Python, the approach presented here does not shy away from direct contact with Javascript.

As a consequence the learning curve is undoubtedly steeper.

On the other hand it cannot lead to a dead end as is often the case with quick-win solutions outgrowing their natural scope, like bad weeds in a garden. Think of the impact of bloated Excel sheets in organizations.

However the hurdle is not so high either.

The Nuxt framework greatly simplifies the development work, is well documented and has a large community. It is based on Vuejs, one of the dominant 3 Javascript frameworks for web dev: React (from Facebook), Vue (independent), Angular (from Google). Among these Vue is arguably the most approachable by non-specialists, and its documentation is extremely clear. Additionally the 150k+ github stars are a sign that developers do not find it unpleasant to use, a key point in this context.

Additionally the nuxt-dashboard-template should guide the development initial steps - a daunting barrier to non-specialists - so that time and energy can be spent on content i.e. Vue components displayed in tabs / sub-tabs ("user components").
For this too, the various examples in the demo dashboard may help - hopefully.

# Features

The nuxt-dashboard-template started out as a regular Nuxt app - built with the official create-nuxt-app. Then it was completed to offer the following features:

  • 1 or 2-level tab layout
    So that a developer can cram a decent amount of data without scroll
  • Routing among tabs/sub-tabs
    So that a developer only focuses on the content to display
  • App state management in url
    So that a shared url leads a user right into a specific tab/sub-tab in a specific state
  • A store to manage
    • the routing state
    • any user component state
  • Demo (same) dashboards in 2 major CSS frameworks:

# Examples

Most dashboard retrieve data and display tables or graphs.
To help with these typical use cases the demo dashboards contain user components that:

Last Updated: 12/18/2019, 4:02:44 PM

Install →