Quick start

To start using this dashboard you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

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.

Argon Dashboard

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

import Vue from 'vue';
import Dashboard from '@/plugins/dashboard-plugin'

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:

  • Badge
  • BaseAlert
  • BaseButton
  • BaseCheckbox
  • BaseInput
  • BaseDropdown
  • BaseNav
  • BasePagination
  • BaseProgress
  • BaseRadio
  • BaseSlider
  • BaseSwitch
  • BaseHeader
  • Card
  • StatsCard
  • Modal
  • RouteBreadcrumb
  • ElInput (element-ui)
  • ElTooltip (element-ui)
  • ElPopover (element-ui)
  • Sidebar
  • SidebarItem

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 Dashboard, they should be imported locally.

You can find the components inside src/components/ folder.

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 "./routes/starterRouter";

Bootstrap components

Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

Bootstrap tutorial

Please check our official Youtube channel for more tutorials.