Folder Structure
This is the main project structure. We will go over some of the main project folders below.
|-- Vue Paper Dashboard PRO
|-- .babelrc
|-- .editorconfig
|-- .eslintrc.json
|-- .gitattributes
|-- .gitignore
|-- CHANGELOG.md
|-- README.md
|-- index.html
|-- package.json
|-- vue.config.js
|-- documentation
| |-- tutorial-components.html
| |-- css
| | |-- demo.css
| | |-- documentation.css
| | |-- paper-dashboard.css
| |-- img
| |-- apple-icon.png
| |-- back.jpg
| |-- favicon.png
| |-- tim-logo.png
|-- public
| |-- index.html
| |-- static
| |-- favicon.png
| |-- css
| | |-- themify-icons.css
| |-- fonts
| |-- img
|-- src
|-- App.vue
|-- gloablComponents.js
|-- globalDirectives.js
|-- main.js
|-- pollyfills.js
|-- sidebarLinks.js
|-- assets
| |-- fonts
| | |-- nucleo-icons.eot
| | |-- nucleo-icons.ttf
| | |-- nucleo-icons.woff
| | |-- nucleo-icons.woff2
| |-- sass
| |-- demo.scss
| |-- element_variables.scss
| |-- paper-dashboard.scss
| |-- paper
| |-- _alerts.scss
| |-- _animated-buttons.scss
| |-- _badges.scss
| |-- _buttons.scss
| |-- _cards.scss
| |-- _carousel.scss
| |-- _chartist.scss
| |-- _checkboxes-radio.scss
| |-- _collapse.scss
| |-- _dropdown.scss
| |-- _example-pages.scss
| |-- _footers.scss
| |-- _images.scss
| |-- _info-areas.scss
| |-- _inputs.scss
| |-- _media-queries.scss
| |-- _misc-extend.scss
| |-- _misc.scss
| |-- _mixins.scss
| |-- _modals.scss
| |-- _navbar.scss
| |-- _nucleo-outline.scss
| |-- _pagination.scss
| |-- _pills.scss
| |-- _popups.scss
| |-- _progress.scss
| |-- _responsive.scss
| |-- _sections.scss
| |-- _select.scss
| |-- _sidebar-and-main-panel.scss
| |-- _social-buttons.scss
| |-- _tables.scss
| |-- _tabs.scss
| |-- _timeline.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- cards
| | |-- _card-background.scss
| | |-- _card-chart.scss
| | |-- _card-collapse.scss
| | |-- _card-contributions.scss
| | |-- _card-info-area.scss
| | |-- _card-lock.scss
| | |-- _card-map.scss
| | |-- _card-plain.scss
| | |-- _card-pricing.scss
| | |-- _card-profile.scss
| | |-- _card-signup.scss
| | |-- _card-stats-mini.scss
| | |-- _card-stats.scss
| | |-- _card-subcategories.scss
| | |-- _card-tasks.scss
| | |-- _card-testimonials.scss
| | |-- _card-user.scss
| |-- mixins
| | |-- _badges.scss
| | |-- _buttons.scss
| | |-- _cards.scss
| | |-- _chartist.scss
| | |-- _dropdown.scss
| | |-- _inputs.scss
| | |-- _modals.scss
| | |-- _page-header.scss
| | |-- _popovers.scss
| | |-- _social-buttons.scss
| | |-- _tags.scss
| | |-- _transparency.scss
| | |-- _vendor-prefixes-extend.scss
| | |-- _vendor-prefixes.scss
| | |-- _wizard.scss
| |-- plugins
| |-- _plugin-bootstrap-switch.scss
| |-- _plugin-card-wizard.scss
| |-- _plugin-fullcalendar.scss
| |-- _plugin-jquery.jvectormap.scss
| |-- _plugin-nouislider.scss
| |-- _plugin-perfect-scrollbar.scss
| |-- _plugin-sweetalert2.scss
| |-- _plugin-vue-notifyjs.scss
| |-- element-ui
| |-- _plugin-inputs.scss
| |-- _plugin-select.scss
| |-- _plugin-slider.scss
| |-- _plugin-tables.scss
| |-- _plugin-tags.scss
|-- components
| |-- Dashboard
| | |-- Layout
| | | |-- Content.vue
| | | |-- ContentFooter.vue
| | | |-- DashboardLayout.vue
| | | |-- LoadingMainPanel.vue
| | | |-- TopNavbar.vue
| | |-- Views
| | |-- Charts.vue
| | |-- Calendar
| | | |-- Calendar.vue
| | | |-- CalendarRoute.vue
| | |-- Components
| | | |-- Buttons.vue
| | | |-- GridSystem.vue
| | | |-- Icons.vue
| | | |-- NotificationTemplate.vue
| | | |-- Notifications.vue
| | | |-- Panels.vue
| | | |-- SweetAlert.vue
| | | |-- Typography.vue
| | |-- Dashboard
| | | |-- Overview.vue
| | | |-- Widgets.vue
| | | |-- Widgets
| | | |-- Task.vue
| | | |-- TaskList.vue
| | |-- Forms
| | | |-- ExtendedForms.vue
| | | |-- RegularForms.vue
| | | |-- ValidationForms.vue
| | | |-- Wizard.vue
| | | |-- ValidationForms
| | | | |-- LoginForm.vue
| | | | |-- RegisterForm.vue
| | | | |-- TypeValidationForm.vue
| | | |-- Wizard
| | | |-- FirstStep.vue
| | | |-- SecondStep.vue
| | | |-- ThirdStep.vue
| | |-- Maps
| | | |-- API_KEY.js
| | | |-- FullScreenMap.vue
| | | |-- GoogleMaps.vue
| | | |-- VectorMaps.vue
| | | |-- VectorMapsPage.vue
| | | |-- WorldMap.vue
| | | |-- world_map.js
| | |-- Pages
| | | |-- Lock.vue
| | | |-- Login.vue
| | | |-- Register.vue
| | | |-- TimeLinePage.vue
| | | |-- UserProfile.vue
| | | |-- background-2.jpg
| | | |-- Layout
| | | | |-- AppFooter.vue
| | | | |-- AppNavbar.vue
| | | |-- UserProfile
| | | |-- EditProfileForm.vue
| | | |-- MembersCard.vue
| | | |-- UserCard.vue
| | |-- Tables
| | |-- ExtendedTables.vue
| | |-- PaginatedTables.vue
| | |-- RegularTables.vue
| | |-- users.js
| |-- GeneralViews
| | |-- NotFoundPage.vue
| |-- UIComponents
| |-- Badge.vue
| |-- Button.vue
| |-- Dropdown.vue
| |-- InfoSection.vue
| |-- Modal.vue
| |-- Pagination.vue
| |-- Progress.vue
| |-- Switch.vue
| |-- index.js
| |-- Cards
| | |-- Card.vue
| | |-- ChartCard.vue
| | |-- CircleChartCard.vue
| | |-- StatsCard.vue
| |-- Charts
| | |-- BarChart.js
| | |-- DoughnutChart.js
| | |-- LineChart.js
| | |-- PieChart.js
| | |-- utils.js
| |-- Collapse
| | |-- Collapse.vue
| | |-- CollapseItem.vue
| |-- Inputs
| | |-- Checkbox.vue
| | |-- IconCheckbox.vue
| | |-- Radio.vue
| | |-- formGroupInput.vue
| |-- Navbar
| | |-- Navbar.vue
| | |-- NavbarToggleButton.vue
| |-- SidebarPlugin
| | |-- MobileMenu.vue
| | |-- SideBar.vue
| | |-- SidebarItem.vue
| | |-- UserMenu.vue
| | |-- index.js
| |-- Tabs
| | |-- PillsLayout.vue
| | |-- Tab.vue
| | |-- Tabs.vue
| | |-- TabsLayout.vue
| |-- TimeLine
| | |-- TimeLine.vue
| | |-- TimeLineItem.vue
| |-- Wizard
| |-- Wizard.vue
| |-- WizardTab.vue
| |-- throttle.js
|-- routes
|-- routes.js
public folder
Here you will find static assets and the index.html file which is the starting point of our app.
src folder
Is the main project folder. Here you will find a couple of sub directories and some initialization files.
src/assets folder
Contains main asset files such as fonts and sass. This folder contains all the css from the template. Inside you will find small sass files for components, layout and various variables for colors which you can change anc configure yourself depending on your needs.
src/components folder
Here you will find all vue related components & pages. The UIComponents sub folder contains all re-usable components while the Dashboard sub folder contains all demo pages from the dashboard template.
src/routes folder
Contains all vue-router declared routes, routes structure and names. You will most likely delete the route declarations here so you can add your own routes.
main.js file
Is the entry point of our dashboard template. Here, you will find various plugin declarations, global components and global asset imports.