# Quick Start

To start using this design system you will need to to install some dependencies or copy some files to your project.

# Steps to install

  1. Make sure you have Node.js installed.
  2. Navigate to the main directory (from terminal) where package.json is located.
  3. Run npm install or yarn install
  4. Run npm run serve or yarn serve to start the local development server and start prototyping.

# Vue Black Dashboard

Vue Black Dashboard is built as Vue plugin so you can simply import it and use it.

import Vue from 'vue';
import DashboardPlugin from '@/plugins/dashboard-plugins'
Vue.use(DashboardPlugin);

# Changing mode

Vue Black Dashboard PRO comes with 2 pre-build modes and looks: dark and white. Dark mode is the default mode. If you want to switch to white mode, simply add the white-content class to the body inside public/index.html file

 



<body class="sidebar-mini white-content">
  <div class="wrapper" id="app">
</body>

You could also toggle the mode dynamically from the code with this piece of code:

document.body.classList.toggle('white-content');

# Global Components

Argon comes with an extensive set of custom Vue components. Some of them are globally instantiated so it's easier to use them across the app without importing them each time.

Here's the list of global components:

  • BaseButton
  • BaseCheckbox
  • BaseDropdown
  • Card
  • BaseInput

# Local components

Besides the components mentioned above, we have some extra components/plugins that are usually less used and bigger. In order to not affect the overall bundle size of the Argon Kit, they should be imported locally.

Here's the list of local components (which are not global):

    |-- AnimatedNumber.vue
    |-- Badge.vue
    |-- BaseAlert.vue
    |-- BaseNav.vue
    |-- BasePagination.vue
    |-- BaseProgress.vue
    |-- BaseRadio.vue
    |-- BaseSwitch.vue
    |-- BaseTable.vue
    |-- CloseButton.vue
    |-- ImageUpload.vue
    |-- LoadingPanel.vue
    |-- Modal.vue
    |-- NavbarToggleButton.vue
    |-- Slider.vue
    |-- Breadcrumb
    |   |-- Breadcrumb.vue
    |   |-- BreadcrumbItem.vue
    |   |-- RouteBreadcrumb.vue
    |-- Cards
    |   |-- StatsCard.vue
    |-- Charts
    |   |-- BarChart.js
    |   |-- LineChart.js
    |   |-- PieChart.js
    |-- Collapse
    |   |-- Collapse.vue
    |   |-- CollapseItem.vue
    |-- Inputs
    |   |-- BaseCheckbox.vue
    |   |-- BaseRadio.vue
    |   |-- IconCheckbox.vue
    |-- Navbar
    |   |-- Navbar.vue
    |   |-- NavbarToggleButton.vue
    |-- NotificationPlugin
    |   |-- Notification.vue
    |   |-- Notifications.vue
    |-- SidebarPlugin
    |   |-- SideBar.vue
    |   |-- SidebarItem.vue
    |-- Tabs
    |   |-- Tab.vue
    |   |-- Tabs.vue
    |-- Timeline
    |   |-- TimeLine.vue
    |   |-- TimeLineItem.vue
    |-- Wizard
    |   |-- Wizard.vue
    |   |-- WizardTab.vue
    |-- WorldMap
        |-- AsyncWorldMap.vue
        |-- WorldMap.vue

# Starter template

To get started faster, we provide a starter template inside the project. It's a bare bones layout with nav, footer and a hello world. To enable it go to main.js and change line 3



 

import Vue from "vue";
import App from "./App.vue";
import router from "./starterRouter";

← License →