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.
Simply add this package using npm/yarn
# using yarn yarn add aheenam-vue-dashboard # using npm npm i -S aheenam-vue-dashboard
This package includes two components:
dashboard serves as the container for the grid system,
tile is the child component that should be used for the
The dashboard component needs two parameter defining the size of the grid.
<dashboard :rows="4" :columns="4"> </dashboard>
rows property defaults to
3 and the
columns property has 5 as its default. That means
will create a grid with 3 rows and 5 columns.
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.
y and the coordinates where to start the tile and
h represent the width and height of the tile.
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.
Check CHANGELOG for the changelog
To run tests use
If you discover any security related issues, please email firstname.lastname@example.org or use the issue tracker of GitHub.
Aheenam is a small company from NRW, Germany creating custom digital solutions. Visit our website to find out more about us.
The MIT License (MIT). Please see License File for more information.