Getting Started

Rio Dashboard PRO is a beautiful resource built over Bootstrap and Vue. It will help you get started developing dashboards in no time. Rio Dashboard PRO is a Vue.js ported version of the Original Paper Dashboard Pro. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, Vue and Vue-Router. Rio Dashboard PRO was coded by Cristi Jora and the design was made by Creative Tim.

It combines soft colors with beautiful typography and spacious cards and graphics. It is a powerful tool, but it is light and easy to use. It has enough features to allow you to get the job done, but it is not crowded to the point where you can't find the files for a specific plugin.

Rio Dashboard PRO is built using the same design language as Paper Kit. You can easily use them together, or pick between them depending on the project you have. Let us know what you think and what we can improve below. And good luck with development!

Installation

In order to install the project you need Node.js and NPM which comes with the Node.js installer. Another alternative to npm is Yarn which is usually faster when installing packages.

Go to the main folder where package.json is located. Open a terminal window and run the following commands:

npm install or yarn install

and

npm run serve or yarn serve

to start local development server This template was built with Nuxt. For more details please check out Nuxt. docs.

You can find other npm tasks inside the package.json. We will list them here and explain what each task does

npm run build

to build the website for production.

Once you have downloaded the archive and opened it, you will find a couple of folders with code and configuration files. Let's take it one by one. The first folder we want to look at is the base folder structure

Note

WARNING

For MAC Users, please make sure you have enabled view hidden files We've encountered some cases when developers copied over the dashboard files but because of hidden files, important files such as .nuxt folder were not copied. Please make sure you copy all files in order to avoid unwanted issues.

Folder Structure

This is the main project structure. We will go over some of the main project folders below.

|-- Rio Dashboard PRO
    |-- .nuxt
    |-- .editorconfig
    |-- .gitignore
    |-- README.md
    |-- package.json
    |-- nuxt.config
    |-- static
    |   |-- favicon.png 
    |-- assets
        |-- webfonts
        |-- sass
        |-- css
        |-- img
    |-- components
        |-- cms
        |-- GoogleMapLoader
        |-- Plugin
        |-- UiComponents
    |-- layouts
    |-- middleware
    |-- pages
    |-- plugins
    |-- store