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. It's preferred to have Node.js version higher than 8.9. Also it's desired to not use "Current" version but rather use the "Latest Stable Version" or "LTS"
  2. Navigate to the main directory (from terminal) where package.json is located.
  3. Run npm install or yarn install
  4. Run npm run dev or yarn dev to start the local development server and start prototyping.

Nuxt Black Dashboard PRO

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

In Nuxt.config you'll see 3 plugins. On is for the dashboard and the other 2 are for the full calendar and world map.

  plugins: [
    `~/plugins/dashboard-plugin.js`,
    { src: '~/plugins/full-calendar.js', ssr: false },
    { src: '~/plugins/world-map.js', ssr: false }
  ]

Besides this, some css files are imported in the nuxt.config.js. 1 is for the custom icons, 1 for the dashboard and one for demo pages. If you won't use any of our demo pages, then you may delete this demo.css file from the config.

  css: [
    'assets/css/demo.css',
    'assets/css/nucleo-icons.css',
    'assets/sass/black-dashboard-pro.scss'
  ]

Changing mode

Nuxt 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 bodyAttrs inside nuxt.config.js file


 


bodyAttrs: {
  class: 'sidebar-mini' // delete the class to have the sidebar expanded by default. Add `white-content` class here to enable "white" mode.
}

You could also toggle the mode dynamically from the code with this piece of code: Note that this will work only in mounted since in the SSR context (on the server) you don't have access to window or document

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

Starter page & layout.

We've created a starter layout and page to get started easier. Just navigate to /starter-page or open the starter-page.vue page to edit the contents of the page. The layout for it is located in layouts/starter.vue

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):

   |-- components
       |-- AnimatedNumber.vue
       |-- Badge.vue
       |-- BaseAlert.vue
       |-- BaseButton.vue
       |-- BaseDropdown.vue
       |-- BasePagination.vue
       |-- BaseProgress.vue
       |-- BaseSwitch.vue
       |-- BaseTable.vue
       |-- CloseButton.vue
       |-- ImageUpload.vue
       |-- LoadingPanel.vue
       |-- Modal.vue
       |-- NavbarToggleButton.vue
       |-- README.md
       |-- Slider.vue
       |-- index.js
       |-- Breadcrumb
       |   |-- Breadcrumb.vue
       |   |-- BreadcrumbItem.vue
       |   |-- RouteBreadcrumb.vue
       |-- Calendar
       |   |-- Calendar.vue
       |   |-- CalendarHeader.vue
       |-- Cards
       |   |-- Card.vue
       |   |-- StatsCard.vue
       |-- Charts
       |   |-- BarChart.js
       |   |-- LineChart.js
       |   |-- PieChart.js
       |   |-- config.js
       |   |-- utils.js
       |-- Collapse
       |   |-- Collapse.vue
       |   |-- CollapseItem.vue
       |-- Dashboard
       |   |-- CountryMapCard.vue
       |   |-- TaskList.vue
       |   |-- UserTable.vue
       |-- ExtendedTables
       |   |-- ShoppingTable.vue
       |-- Headers
       |   |-- SweetAlertHeader.vue
       |-- Inputs
       |   |-- BaseCheckbox.vue
       |   |-- BaseInput.vue
       |   |-- BaseRadio.vue
       |   |-- IconCheckbox.vue
       |   |-- TagsInput.vue
       |-- Layout
       |   |-- Content.vue
       |   |-- ContentFooter.vue
       |   |-- DashboardLayout.vue
       |   |-- DashboardNavbar.vue
       |   |-- LoadingMainPanel.vue
       |   |-- SidebarFixedToggleButton.vue
       |   |-- SidebarSharePlugin.vue
       |   |-- SidebarToggleButton.vue
       |-- Navbar
       |   |-- BaseNav.vue
       |   |-- NavbarToggleButton.vue
       |-- NotificationPlugin
       |   |-- Notification.vue
       |   |-- Notifications.vue
       |   |-- index.js
       |-- SidebarPlugin
       |   |-- SideBar.vue
       |   |-- SidebarItem.vue
       |   |-- index.js
       |-- Tabs
       |   |-- Tab.vue
       |   |-- Tabs.vue
       |-- Timeline
       |   |-- TimeLine.vue
       |   |-- TimeLineItem.vue
       |-- UserProfile
       |   |-- EditProfileForm.vue
       |   |-- UserCard.vue
       |-- ValidationForms
       |   |-- LoginForm.vue
       |   |-- RangeValidationForm.vue
       |   |-- RegisterForm.vue
       |   |-- TypeValidationForm.vue
       |-- Wizard
       |   |-- FirstStep.vue
       |   |-- SecondStep.vue
       |   |-- ThirdStep.vue
       |   |-- Wizard.vue
       |   |-- WizardTab.vue
       |   |-- throttle.js
       |-- WorldMap
           |-- WorldMap.vue

← License →