# Nuxt Frontend Setup
To start using this dashboard you will need to to install some dependencies or copy some files to your project.
# Steps to install
Note: As many packages are deprecated on Node.js v16.x or higher make sure you are using Node.js 14.x(recommended) before strarting this installation.
- Navigate to your Nuxt Argon Dashboard project folder:
cd your-nuxt-argon-dashbord-project
- Install project dependencies:
npm install
- Create a new .env file:
cp .env.example .env
BASE_URL
should contain the URL of your Nuxt Argon Dashboard Project (eg. http://localhost:8080/)API_BASE_URL
should contain the URL of your Laravel JSON:API Project. (eg. http://localhost:3000/api/v1)- Run
npm run dev
to start the application in a local development environment ornpm run build
to build release distributables.
# Argon Dashboard
Argon Dashboard is built as Nuxt plugin so you can simply use it in your nuxt.config.js file
plugins: ["~/plugins/dashboard/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.
# Resources and credits
An user-friendly, open source and beautiful dashboard based on Bootstrap 4.
We at Creative Tim have always wanted to deliver great tools to all the web developers. We want to see better websites and web apps on the internet. Argon design
Developer First
Argon dashboard is a "Developer First" product, with a lot of variables for colors, fonts, sizes and other elements.
High quality before everything
We are following the latest code standards provided by the guys from Bootstrap, so you will love working with this dashboard.
Community helpers
Since all our products are built on top of Open Source also Argon dashboard is released under MIT License.
# Resources and credits
This dashboard is fully coded and built on top of Open Source, more details here:
- Bootstrap 4 - Open source front end framework
- Vue - The Progressive JavaScript Framework
- Nuxt.js - The Vue.js Framework
- noUISlider - JavaScript Range Slider
- Open Sans Font - Google’s Open Source typefaces
- Stripe Elements - Forms, Buttons and Elements
- Flatpickr - Lightweight, powerful javascript date picker
- WebGradients - A curated collection of splendid gradients made in CSS3
# Learn more
Stay up to date on the development journey and connect with us on:
- Follow Creative Tim on Twitter.
- Read and subscribe to The Official Creative Tim Blog.
- Follow Creative Tim on Instagram.
- Follow Creative Tim on Facebook.
- Follow Updivision on Facebook.
- Follow Updivision on Twitter.
- Follow Updivision on Linkedin.
- Read and subscribe to The Official Updivision Blog.