A Free Nuxt Admin Dashboard Project using Bootstrap 4 & Bootstrap-vue UI Components and Chart.js

Nuxtrap

✨ Note: Nuxtrap is a private admin dashboard Project. But, you can use to develop your own dashaboard web application or extend by fork the repository.

Quick Start

Usage Guideness of Nuxtrap

1. Just Explore If you just want to explore, git clone https://github.com/Joontae-Kim/Nuxt-Bootstrap-Dashboard.git

2. Extend Nuxtrap If you want to extend some features or fix bugs, let's folk this repository and clone folked repository placed in your own github.

3. Create your own Dashboard using Nuxtrap If you want to create a dashboard web application based on Nuxtrap, git clone --mirror https://github.com/Joontae-Kim/Nuxt-Bootstrap-Dashboard.git . Then, reset the repository url git remote set-url --push origin https://github.com/[exampleuser]/Nuxt-Bootstrap-Dashboard.git. and To update your mirror, fetch updates and push.

$ git fetch -p origin
$ git push --mirror

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# analyze builded application size
$ npm run analyze

Features

• Server-side Rendered Using Nuxt.js
• Support Fully Responsive Design
• Make Restful API for generating or managing dashboard contents
• Support to draw multiple types of charts.
  • Line, Bar, Doughnut, Pie, Polar Area and mixed or complex type
• Integrate with the CSS Preprocessor SCSS

Configuration

1. Customize the Bootstrap and Bootstrap-vue

Configure options to customize Bootstrap SCSS in the bootstrapVue property of the nuxt.config.js. Refer the Nuxt.js module section of Bootstrap-vue to customize the bootstrap and bootstrap-vue system.

modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
  bootstrapCSS: false, // Or `css: false`
  bootstrapVueCSS: false, // Or `bvCSS: false`
  icons: false,
  componentPlugins: [
    // component plugins
  ],
  directivePlugins: [
    // directive plugins
  ],
  config: {
    breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
  }
}

1. bootstrapCSS and bootstrapVueCSS
   • Disable automatic inclusion of Bootstrap and BootstrapVue pre-compiled CSS files by setting the following option(s) to false. And, you can find bootstrap and bootstrap-vue custom stylesheet in the directory asstes/styles/library/bootstrap and asstes/styles/library/bootstrapVue.
   • Each sub-directory of the assets/styles/library have blocks directory that edited or extended from default style.
2. icons
   • Set icon: false to use the bootstrapVue icon and create the plugin ~/plugins/importBootstrapVueIcons for importing independently icon components.
3. config.breakpoints
   • In Nuxtrap, Extend the bootstrap 4's default breakpoints. extended breakpoints scss variables is placed in /assets/styles/library/_library.scss.
   • Read More the Section Configuring defaults and Setting new configuration values in https://bootstrap-vue.org/docs/reference/settings#default-bootstrapvue-configuration.

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 640px,
  lg: 992px,
  xl: 1200px,
  xxl: 1366px,
  sxl: 1680px,
);

2. Transfer data and content from server to client

Nuxtrap have custom Endpoint API in the directory /api. Each endpoint mapped to serverMiddleware property in nuxt.config.js like { path, handler }. Refer configuration-servermiddleware#custom-api-endpoint.

serverMiddleware: [
  bodyParser.json(),
  { path: '/test', handler: '~/api/test.js' }, // for api test
  { path: '/api/over', handler: '~/api/over.js' },
  { path: '/api/event', handler: '~/api/event.js' },
  { path: '/api/users', handler: '~/api/users.js' }
],

On client, Use @nuxtjs/axios to communicate with API Endpoints and Add @nuxtjs/axios to modules property in nuxt.config.js and create a axiost plugin for interceptors feature - /plugins/axios.js.

modules: [
  '@nuxtjs/axios'
],
...,
plugins: [
  '~/plugins/axios'
]

3. Integrate with Chart.js

For Integrating with Chart.js, create the plugin /plugins/chartjs.js and others.

plugins: [
  '~/plugins/chartjs',
]

• /lib/chart.lib.js: Chart Global Configuration Variables
• /mixins/chart/*: mixins for customizing chartjs js module
  • Merge default option with option passed from chart-component's props
  • Compute Scale Ticks for Bar and Line Chart
  • Create a chart color-set
  • Create a custom common style for all charts
  • Draw and Update chart instance

In Nuxtrap, Created reusable chart components (/components/chart/~).

• Bar Chart (/components/chart/BarChart.vue)
• Line Chart (/components/chart/LineChart.vue)
• Doughnut Chart (/components/chart/DoughnutChart.vue)
• Pie Chart (/components/chart/PieChart.vue)
• PolartArea (/components/chart/PolarArea.vue)

Project Structure

.
├── ...
├── api                         # ServerMiddleware - custom Endpoint API
├── assets                      # Application resources
├── components                  # Reusable components
│   ├── base
│   ├── chart
│   ├── common
│   ├── dashboard
│   ├── event
│   ├── landing
│   ├── users
│   └── index
├── env                         # Environment vairables
├── layouts                     # Global layouts
├── lib                         # Helper Functions 
├── middleware                  # Route middleware
├── mixins                      # Reusable module for common js feature
├── pages                       # Vue Page components template
├── plugins                     # Global js module that injected to root Vue.js Application
├── static                      # Other types static resources
├── store                      	# Vuex store directory
├── test                        # Unit tests
│
│   nuxt.config.js              # Nuxt application configuration
└── ...

• This project is bootstrapped using create-nuxt-app.
• /layouts : All Primary layout templates are located
  • /layouts/default.vue : for just landing page
  • /layouts/dashboard.vue : for types of dashboard pages
  • /layouts/authentication.vue : for types of authentication pages
  • /layouts/utility.vue : for types of utility pages
• /pages : Every Page component is a .vue Vue component. and Nuxt.js support automatic routes based on your provided Vue files inside the pages directory.
  • Read more, file-system-routing.
• /components : all template-specific subcomponents are located in their own subdirectory.
  • components configuration is set in components property in nuxt.config.js
  • if components: true in nuxt.config.js , all components is automatically imported.
  • Read More, component-discovery
• /plugins : it contains Javascript plugins that you want to run before instantiating the root Vue.js Application.
  • Inject extended features of external packages/modules and custom features or variables in $root & context.
  • The Plugins configuration is set in plugins property in nuxt.config.js
  • Read more plugins, inject-in-root--context
• /api
  • This directory is Custom API endpoint and we can use API endpoint to enroll to serverMiddleware property in nuxt.config.js
  • Read More, custom-server-middleware, custom-api-endpoint
  • feature of utility, middleware and library for API is placed in /api/~ directory. not /(root).
• /store
  • It contains your Vuex Store files. Every .js file inside the store directory is transformed as a namespaced module (index being the root module).
• /assets
  • this directory have /images, /styles and /svgs directory. Especially, /styles contains custom, layout and library (bootstrap) scss styles.

Supported browsers

Nuxtrap follows the Supported browsers of the Bootstrap 4 because Nuxtrap's Design System and UI Component based on Bootstrap 4 and Bootstrap-vue.

Read more https://getbootstrap.com/docs/4.5/getting-started/browsers-devices/.

• Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE >= 10, Edge >= 12	Firefox >= 38	Chrome >= 45	Safari >= 9	iOS >= 9	Android >= 4.4	Opera >= 30

Production deployment

✨ Note: If you want to use this repository to create your own project, you can change the Production deployment System and the Environment Variables.

Nuxtrap use dotenv node package to support environments and environment variables for deployment.

If feature/ or hotfix/ branch is merged into the develop branch, automatically the latest develop branch is deployed on the Staging Server. and, develop branch is merged into the master branch, automatically the latest master branch is deployed on the Production Server.

Environtment	Branch	env variables	Deployment
Staging	develop	/env/.env.staging	Heroku - Staging Server
Production	master	/env/.env.production	Heroku - Production Server

Changelog - Release List

1. Release Version 1
   • release-1.1.1
     • Fixed the bug of build error on the production server
   • release-1.2.1
     • Enhance a feature of the Section Landing
     • Enhance a feature of handling SVG Icon
     • Enhance a feature of lazy loading img pages using the IntersectionObserver
     • Fix the bug of layout heading device-icon
   • release-1.3.1
     • Fixed the bug of the Landing Page for- the Browser compability
     • Fixed the bug of the Layout Section
     • Fixed the bug of computing scale axe in chart.js
     • Enhance the feature of transition to the dashboard layout and page
     • Fixed the bug of dashboard navigation-bar and its toolbox transition
   • release-1.4.1
     • Enhanced the authentication type page's background design
     • Create a feature of redirect to https protocol on staging and production level
     • Fixed the authentication layout and page's duplicate overflow error

License