A Vue component to build a CSS Grid Dashboard

This simple package provides two components to create a simple grid to create a dashboard. This package is inspired by the awesome dashboard project created by Spatie.

But instead of providing a complete project this package aims to provide you some components that you can use to integrate in your own projects.

Installation

Simply add this package using npm/yarn

# using yarn
yarn add aheenam-vue-dashboard

# using npm
npm i -S aheenam-vue-dashboard

Usage

This package includes two components: dashboard and tile. While dashboard serves as the container for the grid system, tile is the child component that should be used for the dashboard.

The dashboard component

The dashboard component needs two parameter defining the size of the grid.

<dashboard :rows="4" :columns="4">
</dashboard>

The rows property defaults to 3 and the columns property has 5 as its default. That means

<dashboard></dashboard>

will create a grid with 3 rows and 5 columns.

The tile component

This component is in charge of building the grids in this dashboard. Using the properties you can position and size them.

<dashboard  :rows="4" :columns="4">
  <tile :x="1" :y="1" :w="4" :h="1">
    Hello World!
  </tile>
</dashboard>

Above example create a dashboard with 4 rows and 4 columns and adds a tile that spans over the whole first row.

x & y and the coordinates where to start the tile and w and h represent the width and height of the tile.

Styling

There is no styling applied to this elements. The only CSS that is used is the use of CSS Grid System. All the others styles is meant to applied by yourself by adding class and style bindings to the elements.

Content of the tiles

What about the dashboard contents? It is up to you what you want to display in these tiles. It can be some plain text as shown in the example but also be some complex component that you or someone in the community created.

Take the Clock component we have published. If you want to use this in one of you tile, just import it and add it into your tile:

<dashboard  :rows="4" :columns="4">
  <tile :x="1" :y="1" :w="4" :h="1">
    <clock timezone="Europe/Berlin" />>
  </tile>
</dashboard>

Going this way makes it possible to keep this dashboard package as clean as possible. Also you can choose from almost any of the other packages out there.

Changelog

Check CHANGELOG for the changelog

Testing

To run tests use

yarn test

Contributing

soon

Security

If you discover any security related issues, please email [email protected] or use the issue tracker of GitHub.

About Aheenam

Aheenam is a small company from NRW, Germany creating custom digital solutions. Visit our website to find out more about us.

License

The MIT License (MIT). Please see License File for more information.