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
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”
Navigate to the main directory (from terminal) where package.json is located.
Run npm install or yarn install
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.
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.
Changing mode
Nuxt Black Dashboard 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
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
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 Pro
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):
Local components
Here’s the list of local components (which are not global):