Dashboarding with Nuxt

# General

For a general introduction to the Nuxt application directory structure, read their official doc.
Below is a description of the directory structure in the context of nuxt-dashboard-template.

# Api

The folder api contains functions to make HTTP requests.
It has one example such functions to request static files located in folder cdn/ and served from there by command yarn cdn.
It also contains api-[name]-dataclass.js files to format the data received by an API to the user components interface. This enables to circumscribe data shaping to a single file.

This is not a Nuxt folder.

# Assets

The folder assets contains:

# Cdn

The folder cdn contains data files "companions" of the dashboard.
Some times dashboards retrieve data directly from APIs. Other times, data files are built and posted on a CDN for consumption by the dashboard.
The folder contains an example of data file in json, markdown, jpg and png formats.

This is not a Nuxt folder.

# Components

The folder components contains Vue components files.

The components in sub-folder generic/ are not meant to be changed, except nav-bar.vueand footer.vue once to adapt to your organization.

The other components are the contents of the tab / sub-tabs, a collection of examples to demonstrate usual patterns:

# Credentials

The folder credentials, if present, contains the software license used in the app.

This is not a Nuxt folder.

# Dist

The folder dist, if present, contains the built application by command yarn build-*.

It can be served by script yarn start or serve_dir_dist.py.
It is the starting point of script build_single_file.py.

# Js

The folder js contains the Javascript modules used in the app.

The sub-folder generic is not meant to be modified as it powers the 2-level dashboard system and the storage of app state in the query string of the url.

WARNING

The sub-folder conf contains the structure of the dashboard.
This structure must be consistent with that of the pages folder.

This is not a Nuxt folder.

# Layouts

The folder layouts contains the:

They are not meant to be modified.

# Middleware

The folder layouts contains Javascript modules to be executed before a route change.

It contains a rerouting mechanism to go to the right sub-tab, where necessary.

# Pages

The folder pages contains the structure of the dashboard in tabs and sub-tabs.

WARNING

The structure of folder pages must match the js/generic/conf/dashboard.js file.

Top level index.vue is the component referenced in default.vue as <nuxt />.
It is not meant to be changed.

# First Level Tab

To create a 1st-level tab e.g. "slider2d" tab you need create the following files:

File index/slider2d.vue is a template with only param path to be adjusted:

pathObj: { level: 2, path: 'slider2d' }

File index/slider2d/index.vue is a template with only the component imported (from folder components) and displayed to be adjusted.

import TabSlider2D from '~/components/tab-slider2d';

# Second Level Tab

To create a 2nd-level tab e.g. "countries/map" tab you need create the following files:

File index/countries.vue is a template with only param path to be adjusted:

pathObj: { level: 2, path: 'countries' }

File index/countries/index.vue is a template.
It only contains a rerouting function towards the sub-tabs of /countries.

export default {
  middleware: 'active-route'
};

File index/countries/map.vue is a template with only the component imported (from folder components) and displayed to be adjusted.

import TabMap from '~/components/tab-map';

# Plugins

The folder plugins contains various folders and .js files which are executed at app creation.

They typically include configuration files for modules used throughout the app.

# Python

The folder python contains several folders:

  • build-frontend: A Python package to perform various operations from building the app as a single file to launching web servers in specific folders.
  • frameworks: Contains folders bootstrap and vuetify each with their versions of folders components, layouts, pages.
  • scripts: Contains following scripts, most based on the build_frontend Python package:
    • analyze_dist.py
    • build_single_file.py
    • copy_cdn_static_to_dist.py
    • select_framework_bootstrap.py
    • select_framework_vuetify.py
    • serve_dir_dist.py
    • serve_dir_template.py
  • template: Contains the output of script build_single_file.py
  • workspace: Temporary folder created and used by script build_single_file.py

This is not a Nuxt folder.

# Static

The folder static contains the favicon and potentially other files served "as is".

The folder contains:

# Store

The folder store contains .js files managing the app Vuex store:

  • dashboard.js to manage dashboard default routes - See Routing section.
  • globe.js used by user component tab-map-globe.vue - as an example.

# nuxt.config.js

The file nuxt.config.js is the configuration file for Nuxt.
See the Config section for more info.

# package.json

The file package.json is the npm config file for the nuxt-dashboard-template package.

Essentially it contains the dependencies of this package, and those for its development, and a number of convenience scripts:

  • cdn: Serve folder cdn/
  • lint: : Lint app source code
  • lintfix: Lint and automatically fix what can be
  • dump-conf-[f]: Dump webpack config produced by Nuxt
  • dev-[f]: Launch Nuxt dev server
  • dev-debug-[f]: Launch Nuxt dev server in debug mode - See Debug section
  • build-dir-local-[f]: Launch Nuxt build for local serve as directory
  • build-sf-local-[f]: Launch Nuxt build for local serve as single file
  • build-sf-[f]: Launch Nuxt build for production as directory
  • build-ghp-[f]: Launch Nuxt build for github-pages deployment
  • start: Launch server with root dist/
  • deploy-ghp: Deploy dist/ on the gh-pages branch of the repo

In the scripts above [f] means framework and can be:

  • b for bootstrap
  • v for vuetify

See the Config section for more info.

Last Updated: 12/18/2019, 12:40:24 PM

← Routing →