├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .husky ├── commit-msg ├── common.sh └── pre-commit ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── README.md ├── assets └── scss │ ├── _base.scss │ ├── _config.scss │ ├── _customs.scss │ ├── _fonts.scss │ ├── _helpers.scss │ ├── _mixins.scss │ ├── _normalize.scss │ ├── _variables.scss │ ├── components │ ├── _cards.scss │ ├── _flexes.scss │ └── _steps.scss │ ├── global.scss │ └── theme.scss ├── commitlint.config.js ├── components ├── Card │ └── Summary.vue ├── Footer.vue ├── Form │ ├── ForgotPassword.vue │ ├── SignIn.vue │ └── SignUp.vue ├── Header │ └── PageHeader.vue ├── NuxtLogo.vue ├── SeoHead.vue ├── Tutorial.vue └── VuetifyLogo.vue ├── constants ├── actionTypes.ts ├── global.ts ├── routes.ts └── statusTypes.ts ├── jest.config.js ├── layouts ├── blank.vue ├── default.vue └── error.vue ├── nuxt.config.js ├── package.json ├── pages ├── auth │ ├── forgotPassword.vue │ ├── signIn.vue │ └── signUp.vue ├── cards.vue ├── charts.vue ├── filters.vue ├── forms.vue ├── headings.vue ├── icons.vue ├── index.vue ├── landing.vue ├── paragraph.vue ├── profile.vue ├── settings.vue ├── tables.vue ├── tabs.vue └── typography.vue ├── plugins ├── apex-chart.js ├── axios.js └── chart.js ├── static ├── favicon.ico ├── json │ ├── buildings.json │ ├── channels.json │ ├── foods.json │ ├── products.json │ ├── projects.json │ ├── sales.json │ ├── summary.json │ └── users.json ├── logo.png ├── logo@2x.png ├── nuxt.png ├── svg │ ├── wave-dark.svg │ ├── wave-triple-dark.svg │ ├── wave-triple.svg │ └── wave.svg ├── v.png └── vuetify-logo.svg ├── store ├── core │ └── index.js ├── index.js └── mock │ └── index.js ├── stylelint.config.js ├── test └── NuxtLogo.spec.js ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | [ 6 | "@babel/preset-env", 7 | { 8 | "targets": { 9 | "node": "current" 10 | } 11 | } 12 | ] 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | es6: true, 6 | node: true 7 | }, 8 | extends: [ 9 | '@nuxtjs/eslint-config-typescript', 10 | 'plugin:nuxt/recommended', 11 | 'prettier' 12 | ], 13 | plugins: [], 14 | // add your custom rules here 15 | rules: { 16 | 'no-tabs': ['error', { allowIndentationTabs: true }], 17 | 'no-console': 0, 18 | 'no-nested-ternary': 0, 19 | 'import/order': 0, 20 | 'import/no-extraneous-dependencies': 0, 21 | 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }], 22 | 'no-use-before-define': [ 23 | 'error', 24 | { functions: false, classes: false, variables: false } 25 | ], 26 | 'vue/html-indent': 0, 27 | 'vue/attribute-hyphenation': 0, 28 | 'vue/html-self-closing': 0, 29 | 'vue/no-v-html': 0, 30 | 'vue/singleline-html-element-content-newline': 0, 31 | 'vue/no-lone-template': 0, 32 | 'vue/v-slot-style': 0, 33 | 'vue/valid-v-slot': [ 34 | 'error', 35 | { 36 | allowModifiers: true 37 | } 38 | ] 39 | }, 40 | settings: { 41 | 'import/resolver': { 42 | node: { 43 | extensions: ['.js', '.vue'] 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | . "$(dirname "$0")/common.sh" 4 | 5 | yarn commitlint --edit $1 6 | -------------------------------------------------------------------------------- /.husky/common.sh: -------------------------------------------------------------------------------- 1 | command_exists () { 2 | command -v "$1" >/dev/null 2>&1 3 | } 4 | 5 | # Workaround for Windows 10, Git Bash and Yarn 6 | if command_exists winpty && test -t 1; then 7 | exec < /dev/tty 8 | fi 9 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | . "$(dirname "$0")/common.sh" 4 | 5 | yarn lint-staged 6 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v14.19.3 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | ### 2 | # Place your Prettier ignore content here 3 | 4 | ### 5 | # .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506 6 | 7 | # Created by .ignore support plugin (hsz.mobi) 8 | ### Node template 9 | # Logs 10 | /logs 11 | *.log 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Runtime data 17 | pids 18 | *.pid 19 | *.seed 20 | *.pid.lock 21 | 22 | # Directory for instrumented libs generated by jscoverage/JSCover 23 | lib-cov 24 | 25 | # Coverage directory used by tools like istanbul 26 | coverage 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # TypeScript v1 declaration files 48 | typings/ 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | 68 | # parcel-bundler cache (https://parceljs.org/) 69 | .cache 70 | 71 | # next.js build output 72 | .next 73 | 74 | # nuxt.js build output 75 | .nuxt 76 | 77 | # Nuxt generate 78 | dist 79 | 80 | # vuepress build output 81 | .vuepress/dist 82 | 83 | # Serverless directories 84 | .serverless 85 | 86 | # IDE / Editor 87 | .idea 88 | 89 | # Service worker 90 | sw.* 91 | 92 | # macOS 93 | .DS_Store 94 | 95 | # Vim swap files 96 | *.swp 97 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "bracketSpacing": true, 6 | "useTabs": false, 7 | "endOfLine": "auto" 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxtjs-vuetify-dashboard 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | 19 | # if you got one of these errors // ✖ eslint --cache failed without output (KILLED). ✖ prettier --check --ignore-unknown: ✖ prettier --check --ignore-unknown 20 | $ yarn lintfix 21 | ``` 22 | 23 | For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org). 24 | 25 | ## Special Directories 26 | 27 | You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality. 28 | 29 | ### `assets` 30 | 31 | The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts. 32 | 33 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets). 34 | 35 | ### `components` 36 | 37 | The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components. 38 | 39 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components). 40 | 41 | ### `layouts` 42 | 43 | Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop. 44 | 45 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts). 46 | 47 | ### `pages` 48 | 49 | This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically. 50 | 51 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing). 52 | 53 | ### `plugins` 54 | 55 | The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`. 56 | 57 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins). 58 | 59 | ### `static` 60 | 61 | This directory contains your static files. Each file inside this directory is mapped to `/`. 62 | 63 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 64 | 65 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static). 66 | 67 | ### `store` 68 | 69 | This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex. 70 | 71 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store). 72 | -------------------------------------------------------------------------------- /assets/scss/_base.scss: -------------------------------------------------------------------------------- 1 | ::selection { 2 | color: $color-white; 3 | background: $color-primary; 4 | } 5 | /* 6 | * { 7 | outline: none; 8 | box-sizing: border-box; 9 | -webkit-tap-highlight-color: transparent; 10 | } 11 | 12 | html, 13 | body { 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: border-box; 17 | background-color: $color-white; 18 | } 19 | 20 | html { 21 | line-height: 1.5; 22 | -webkit-text-size-adjust: 100%; 23 | } 24 | 25 | body { 26 | min-width: 300px; 27 | min-height: 100%; 28 | -webkit-font-smoothing: auto; 29 | letter-spacing: normal; 30 | font-style: normal; 31 | font-weight: normal; 32 | font-size: 14px; 33 | color: $color-text; 34 | font-family: $body-font; 35 | } 36 | 37 | a { 38 | background-color: transparent; 39 | text-decoration: none; 40 | color: initial; 41 | &:hover { 42 | color: $color-primary; 43 | } 44 | &.secondary-link { 45 | color: $color-link; 46 | &:hover { 47 | color: $color-link; 48 | } 49 | } 50 | } 51 | 52 | table { 53 | border-collapse: collapse; 54 | } 55 | 56 | h1, 57 | h2, 58 | h3, 59 | h4, 60 | h5, 61 | h6, 62 | p { 63 | margin: 0; 64 | } 65 | 66 | hr { 67 | border: none; 68 | border-top: 1px solid $color-grey; 69 | 70 | &.dotted { 71 | border: none; 72 | background-image: linear-gradient( 73 | to right, 74 | $color-grey 33%, 75 | rgba(255, 255, 255, 0) 0% 76 | ); 77 | background-position: bottom; 78 | background-size: 7px 1px; 79 | background-repeat: repeat-x; 80 | height: 1px; 81 | } 82 | 83 | &.light { 84 | border-color: $color-grey-light; 85 | &.dotted { 86 | background-image: linear-gradient( 87 | to right, 88 | $color-grey-light 33%, 89 | rgba(255, 255, 255, 0) 0% 90 | ); 91 | } 92 | } 93 | } 94 | 95 | strong { 96 | font-family: 'Nunito'; 97 | font-weight: 700; 98 | } 99 | 100 | figure { 101 | margin: 0; 102 | padding: 0; 103 | border: 0; 104 | height: 100%; 105 | vertical-align: middle; 106 | } 107 | */ 108 | 109 | h1, 110 | h2, 111 | h3, 112 | h4, 113 | h5, 114 | h6 { 115 | margin-bottom: 0.7rem; 116 | } 117 | -------------------------------------------------------------------------------- /assets/scss/_config.scss: -------------------------------------------------------------------------------- 1 | // custom theme 2 | @import './variables'; 3 | @import './mixins'; 4 | -------------------------------------------------------------------------------- /assets/scss/_customs.scss: -------------------------------------------------------------------------------- 1 | /* html { 2 | min-height: 100%; 3 | body { 4 | background: none; 5 | } 6 | } 7 | 8 | ul, 9 | ol { 10 | margin-top: 0; 11 | margin-bottom: 0; 12 | &.list-number { 13 | list-style: decimal; 14 | padding-left: 20px; 15 | } 16 | 17 | &.list-bullet { 18 | list-style: circle; 19 | padding-left: 20px; 20 | } 21 | 22 | &.list-unstyled { 23 | margin: 0; 24 | padding: 0; 25 | list-style: none; 26 | } 27 | } 28 | 29 | .view-desktop { 30 | min-width: $mobile-width-limit; 31 | .container, 32 | .container-fluid { 33 | min-width: $mobile-width-limit; 34 | } 35 | } 36 | 37 | .view-mobile { 38 | .main-content { 39 | max-width: $mobile-width-limit; 40 | margin-left: auto; 41 | margin-right: auto; 42 | } 43 | 44 | .modal-body { 45 | background: $color-bg-body; 46 | .custom-modal-content { 47 | background: $color-white; 48 | box-shadow: $shadow; 49 | overflow: hidden; 50 | } 51 | } 52 | 53 | .right-bottom-area { 54 | right: 15px; 55 | bottom: 75px; 56 | } 57 | 58 | .container, 59 | .container-fluid, 60 | .custom-modal-content { 61 | max-width: $mobile-width-limit; 62 | } 63 | } 64 | 65 | .view-desktop, 66 | .view-mobile { 67 | @extend .min-h-100vh; 68 | } 69 | 70 | .view-mobile, 71 | .modal.is-mobile { 72 | a { 73 | &:hover { 74 | color: initial; 75 | } 76 | &.secondary-link { 77 | &:hover { 78 | color: $color-blue; 79 | } 80 | } 81 | } 82 | } 83 | 84 | .backdrop { 85 | background: $color-backdrop; 86 | position: fixed; 87 | left: 0; 88 | top: 0; 89 | width: 100%; 90 | height: 100%; 91 | z-index: 1042; 92 | } 93 | 94 | .main-content { 95 | min-height: 65vh; 96 | } 97 | 98 | .icon-img { 99 | display: inline-block; 100 | vertical-align: middle; 101 | line-height: 1; 102 | object-fit: contain; 103 | } 104 | 105 | .section { 106 | background-color: $color-white; 107 | &.has-shadow { 108 | box-shadow: $shadow; 109 | } 110 | &.rounded { 111 | border-radius: 8px; 112 | } 113 | } 114 | 115 | .section-title { 116 | font-size: 22px; 117 | font-weight: 900; 118 | } 119 | .section-subtitle { 120 | font-size: 16px; 121 | font-weight: 300; 122 | } 123 | 124 | .right-bottom-area { 125 | position: fixed; 126 | z-index: 9; 127 | right: 25px; 128 | bottom: 20px; 129 | text-align: right; 130 | } 131 | 132 | .go-top { 133 | cursor: pointer; 134 | background: $color-white; 135 | box-shadow: $shadow; 136 | border-radius: 15px; 137 | opacity: 0.75; 138 | transition: 0.3s; 139 | display: inline-block; 140 | 141 | &:hover { 142 | opacity: 1; 143 | } 144 | 145 | img { 146 | height: 40px; 147 | } 148 | } 149 | 150 | .height-helper { 151 | height: 100vh; 152 | position: fixed; 153 | visibility: hidden; 154 | z-index: -9999; 155 | top: -999; 156 | left: -999; 157 | width: 1px; 158 | } 159 | 160 | .button-mobile-sticky-bottom { 161 | border-top: 1px solid $color-grey-light; 162 | background-color: $color-white; 163 | position: sticky; 164 | left: 0; 165 | bottom: 0; 166 | z-index: 2; 167 | } 168 | */ 169 | -------------------------------------------------------------------------------- /assets/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | .font-semi-bold { 2 | font-weight: 600; 3 | } 4 | 5 | .font-bold { 6 | font-weight: 700; 7 | } 8 | 9 | .font-normal { 10 | font-weight: normal; 11 | } 12 | 13 | .font-lightest { 14 | font-weight: 100; 15 | } 16 | -------------------------------------------------------------------------------- /assets/scss/_helpers.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --vh: 100vh; 3 | --warning--text: #ffeb3b; 4 | } 5 | 6 | .min-h-100vh { 7 | min-height: 100vh; 8 | min-height: calc(var(--vh, 1vh)); 9 | } 10 | 11 | .position-relative { 12 | position: relative !important; 13 | } 14 | 15 | .v-align-middle { 16 | vertical-align: middle !important; 17 | } 18 | 19 | .text-strike { 20 | text-decoration: line-through !important; 21 | } 22 | 23 | .text-capitalize { 24 | text-transform: capitalize !important; 25 | } 26 | 27 | .no-underline { 28 | text-decoration: none; 29 | } 30 | 31 | .lh-1 { 32 | line-height: 1 !important; 33 | } 34 | 35 | .lh-1--2 { 36 | line-height: 1.2 !important; 37 | } 38 | 39 | .lh-2 { 40 | line-height: 2 !important; 41 | } 42 | 43 | .color-primary { 44 | color: $color-primary !important; 45 | } 46 | 47 | .color-text { 48 | color: $color-text !important; 49 | } 50 | 51 | .color-black { 52 | color: $color-black !important; 53 | } 54 | 55 | .color-white { 56 | color: $color-white !important; 57 | } 58 | 59 | .color-red { 60 | color: $color-red !important; 61 | } 62 | 63 | .color-blue { 64 | color: $color-blue !important; 65 | } 66 | 67 | .color-grey { 68 | color: $color-grey !important; 69 | } 70 | 71 | .color-grey-dark { 72 | color: $color-grey-dark !important; 73 | } 74 | 75 | .color-green-dark { 76 | color: $color-green-dark !important; 77 | } 78 | 79 | .color-orange { 80 | color: $color-orange !important; 81 | } 82 | 83 | .color-disabled { 84 | color: $color-disabled !important; 85 | } 86 | 87 | // .text-clamp-1 { 88 | // @include text-clamp(1); 89 | // } 90 | 91 | // .text-clamp-2 { 92 | // @include text-clamp(2); 93 | // } 94 | 95 | // .text-clamp-3 { 96 | // @include text-clamp(3); 97 | // } 98 | 99 | .disable-select { 100 | user-select: none; /* supported by Chrome and Opera */ 101 | -webkit-user-select: none; /* Safari */ 102 | -khtml-user-select: none; /* Konqueror HTML */ 103 | -moz-user-select: none; /* Firefox */ 104 | -ms-user-select: none; /* Internet Explorer/Edge */ 105 | } 106 | 107 | .disable-link { 108 | pointer-events: none; 109 | cursor: default; 110 | } 111 | 112 | $cursors: pointer, default, not-allowed; 113 | @each $i in $cursors { 114 | .cursor-#{$i} { 115 | cursor: #{$i} !important; 116 | } 117 | } 118 | 119 | $overflows: auto, visible, hidden, scroll; 120 | @each $i in $overflows { 121 | .overflow-#{$i} { 122 | overflow: #{$i} !important; 123 | } 124 | } 125 | 126 | $radius: 0, 5, 10, 15, 20, 25, 30; 127 | @each $i in $radius { 128 | .br-#{$i} { 129 | border-radius: #{$i}px !important; 130 | } 131 | } 132 | 133 | $z-indexs: 0, 1, 2, 3, 9, 99, 999; 134 | @each $i in $z-indexs { 135 | .z-index-#{$i} { 136 | z-index: #{$i} !important; 137 | } 138 | } 139 | 140 | @for $i from 8 through 32 { 141 | .font-#{$i} { 142 | font-size: #{$i}px !important; 143 | } 144 | } 145 | 146 | .lh-normal { 147 | line-height: normal !important; 148 | } 149 | 150 | .lh-2em { 151 | line-height: 2em !important; 152 | } 153 | 154 | .lh-3em { 155 | line-height: 3em !important; 156 | } 157 | 158 | .lh-4em { 159 | line-height: 4em !important; 160 | } 161 | 162 | .menu-toggle { 163 | transition: all ease 0.5s; 164 | i.mdi-menu:before { 165 | content: '\F0BAB'; 166 | transform: rotate(180deg); 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /assets/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @function opposite-direction($directions) { 2 | $opposite-directions: (); 3 | $direction-map: ( 4 | 'top': 'bottom', 5 | 'right': 'left', 6 | 'bottom': 'top', 7 | 'left': 'right', 8 | 'center': 'center', 9 | 'ltr': 'rtl', 10 | 'rtl': 'ltr' 11 | ); 12 | @each $direction in $directions { 13 | $direction: to-lower-case($direction); 14 | @if map-has-key($direction-map, $direction) { 15 | $opposite-directions: append( 16 | $opposite-directions, 17 | unquote(map-get($direction-map, $direction)) 18 | ); 19 | } @else { 20 | @warn "No opposite direction can be found for `#{$direction}`. Direction omitted."; 21 | } 22 | } 23 | @return $opposite-directions; 24 | } 25 | 26 | @mixin size($width, $height) { 27 | width: $width; 28 | height: $height; 29 | } 30 | 31 | @mixin square($size) { 32 | @include size($size, $size); 33 | } 34 | 35 | @mixin translate($x, $y) { 36 | transform: translate($x, $y); 37 | } 38 | 39 | @mixin translateX($x) { 40 | transform: translateX($x); 41 | } 42 | 43 | @mixin translateY($y) { 44 | transform: translateY($y); 45 | } 46 | 47 | @mixin gray-scale($value: 100%) { 48 | filter: grayscale($value); 49 | } 50 | 51 | @mixin rotate($x) { 52 | transform: rotate($x); 53 | } 54 | 55 | @mixin scale($ratio...) { 56 | transform: scale($ratio); 57 | } 58 | 59 | @mixin scaleX($ratio) { 60 | transform: scaleX($ratio); 61 | } 62 | 63 | @mixin scaleY($ratio) { 64 | transform: scaleY($ratio); 65 | } 66 | 67 | @mixin align-center($horizontal: true, $vertical: true) { 68 | position: absolute; 69 | @if ($horizontal and $vertical) { 70 | top: 50%; 71 | left: 50%; 72 | @include translate(-50%, -50%); 73 | } @else if ($horizontal) { 74 | left: 50%; 75 | @include translate(-50%, 0); 76 | } @else if ($vertical) { 77 | top: 50%; 78 | @include translate(0, -50%); 79 | } 80 | } 81 | 82 | @mixin wrap-text() { 83 | /* These are technically the same, but use both */ 84 | overflow-wrap: break-word; 85 | word-wrap: break-word; 86 | -ms-word-break: break-all; 87 | /* This is the dangerous one in WebKit, as it breaks things wherever */ 88 | word-break: break-all; 89 | /* Instead use this non-standard one: */ 90 | word-break: break-word; 91 | 92 | /* Adds a hyphen where the word breaks, if supported (No Blink) */ 93 | -ms-hyphens: auto; 94 | -moz-hyphens: auto; 95 | -webkit-hyphens: auto; 96 | hyphens: auto; 97 | } 98 | 99 | @mixin placeholder($color: $color-grey) { 100 | // Firefox 101 | &::-moz-placeholder { 102 | color: $color; 103 | font-size: 12px; 104 | opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 105 | } 106 | &:-ms-input-placeholder { 107 | color: $color; 108 | } 109 | // Internet Explorer 10+ 110 | &::-webkit-input-placeholder { 111 | color: $color; 112 | } 113 | // Safari and Chrome 114 | } 115 | 116 | @mixin triangle($direction, $color: #000, $size: 1em) { 117 | @if not index(top right bottom left, $direction) { 118 | @error "Direction must be either `top`, `right`, `bottom` or `left`."; 119 | } 120 | width: 0; 121 | height: 0; 122 | content: ''; 123 | border-#{opposite-direction($direction)}: $size solid $color; 124 | $perpendicular-borders: $size solid transparent; 125 | @if $direction==top or $direction==bottom { 126 | border-left: $perpendicular-borders; 127 | border-right: $perpendicular-borders; 128 | } @else if $direction==right or $direction==left { 129 | border-bottom: $perpendicular-borders; 130 | border-top: $perpendicular-borders; 131 | } 132 | } 133 | 134 | @mixin alert-styles-plain($color) { 135 | background: $color; 136 | border-top: 1px solid darken($color, 15%); 137 | border-bottom: 1px solid darken($color, 15%); 138 | color: darken($color, 55%); 139 | } 140 | 141 | @mixin cover-background( 142 | $img-url, 143 | $background-top: 'center', 144 | $background-left: 'center', 145 | $background-attachment: 'fixed' 146 | ) { 147 | background: url($img-url) no-repeat unquote($background-top) 148 | unquote($background-left) unquote($background-attachment); 149 | background-size: cover; 150 | } 151 | 152 | @mixin text-clamp($lines: 2, $line-height: false) { 153 | overflow: hidden; 154 | display: -webkit-box; 155 | -webkit-box-orient: vertical; 156 | -webkit-line-clamp: $lines; 157 | 158 | @if $line-height { 159 | max-height: $line-height * $lines * 1px; 160 | } 161 | } 162 | 163 | @mixin alert-styles($color) { 164 | @include gradient-vertical( 165 | $start-color: $color, 166 | $end-color: darken($color, 7.5%) 167 | ); 168 | border-color: darken($color, 15%); 169 | } 170 | 171 | @mixin linear-gradient($top, $bottom...) { 172 | background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6-15 */ 173 | background: -webkit-linear-gradient( 174 | top, 175 | $top 0%, 176 | $bottom 100% 177 | ); /* Chrome10-25,Safari5.1-6 */ 178 | background: linear-gradient( 179 | to bottom, 180 | $top 0%, 181 | $bottom 100% 182 | ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 183 | } 184 | 185 | @mixin liner-gradien-left($left, $right...) { 186 | background: -moz-linear-gradient(left, $left 0%, $right 100%); 187 | background: -webkit-linear-gradient(left, $left 0%, $right 100%); 188 | background: linear-gradient(to right, $left 0%, $right 100%); 189 | } 190 | 191 | @mixin opacity($opacity) { 192 | opacity: $opacity; 193 | // IE8 filter 194 | $opacity-ie: ($opacity * 100); 195 | filter: alpha(opacity=$opacity-ie); 196 | } 197 | 198 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. 199 | // Makes the @content apply to the given breakpoint and wider. 200 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { 201 | $min: breakpoint-min($name, $breakpoints); 202 | @if $min { 203 | @media (min-width: $min) { 204 | @content; 205 | } 206 | } @else { 207 | @content; 208 | } 209 | } 210 | 211 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint. 212 | // Makes the @content apply to the given breakpoint and narrower. 213 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { 214 | $max: breakpoint-max($name, $breakpoints); 215 | @if $max { 216 | @media (max-width: $max) { 217 | @content; 218 | } 219 | } @else { 220 | @content; 221 | } 222 | } 223 | -------------------------------------------------------------------------------- /assets/scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /* html { 2 | line-height: 1.15; 3 | -webkit-text-size-adjust: 100%; 4 | } 5 | body { 6 | margin: 0; 7 | } 8 | main { 9 | display: block; 10 | } 11 | h1 { 12 | font-size: 2em; 13 | margin: 0.67em 0; 14 | } 15 | hr { 16 | box-sizing: content-box; 17 | height: 0; 18 | overflow: visible; 19 | } 20 | pre { 21 | font-family: monospace, monospace; 22 | font-size: 1em; 23 | } 24 | a { 25 | background-color: transparent; 26 | } 27 | abbr[title] { 28 | border-bottom: none; 29 | text-decoration: underline; 30 | text-decoration: underline dotted; 31 | } 32 | b, 33 | strong { 34 | font-weight: bolder; 35 | } 36 | code, 37 | kbd, 38 | samp { 39 | font-family: monospace, monospace; 40 | font-size: 1em; 41 | } 42 | small { 43 | font-size: 80%; 44 | } 45 | sub, 46 | sup { 47 | font-size: 75%; 48 | line-height: 0; 49 | position: relative; 50 | vertical-align: baseline; 51 | } 52 | sub { 53 | bottom: -0.25em; 54 | } 55 | sup { 56 | top: -0.5em; 57 | } 58 | img { 59 | border-style: none; 60 | } 61 | button, 62 | input, 63 | optgroup, 64 | select, 65 | textarea { 66 | font-family: inherit; 67 | font-size: 100%; 68 | line-height: 1.15; 69 | margin: 0; 70 | } 71 | button, 72 | input { 73 | overflow: visible; 74 | } 75 | button, 76 | select { 77 | text-transform: none; 78 | } 79 | [type='button'], 80 | [type='reset'], 81 | [type='submit'], 82 | button { 83 | -webkit-appearance: button; 84 | } 85 | [type='button']::-moz-focus-inner, 86 | [type='reset']::-moz-focus-inner, 87 | [type='submit']::-moz-focus-inner, 88 | button::-moz-focus-inner { 89 | border-style: none; 90 | padding: 0; 91 | } 92 | [type='button']:-moz-focusring, 93 | [type='reset']:-moz-focusring, 94 | [type='submit']:-moz-focusring, 95 | button:-moz-focusring { 96 | outline: 1px dotted ButtonText; 97 | } 98 | fieldset { 99 | padding: 0.35em 0.75em 0.625em; 100 | } 101 | legend { 102 | box-sizing: border-box; 103 | color: inherit; 104 | display: table; 105 | max-width: 100%; 106 | padding: 0; 107 | white-space: normal; 108 | } 109 | progress { 110 | vertical-align: baseline; 111 | } 112 | textarea { 113 | overflow: auto; 114 | } 115 | [type='checkbox'], 116 | [type='radio'] { 117 | box-sizing: border-box; 118 | padding: 0; 119 | } 120 | [type='number']::-webkit-inner-spin-button, 121 | [type='number']::-webkit-outer-spin-button { 122 | height: auto; 123 | } 124 | [type='search'] { 125 | -webkit-appearance: textfield; 126 | outline-offset: -2px; 127 | } 128 | [type='search']::-webkit-search-decoration { 129 | -webkit-appearance: none; 130 | } 131 | ::-webkit-file-upload-button { 132 | -webkit-appearance: button; 133 | font: inherit; 134 | } 135 | details { 136 | display: block; 137 | } 138 | summary { 139 | display: list-item; 140 | } 141 | template { 142 | display: none; 143 | } 144 | [hidden] { 145 | display: none; 146 | } 147 | */ 148 | -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | /* BASE COLOR */ 2 | // $color-transparent: transparent; 3 | $color-black: #121212; 4 | $color-white: #ffffff; 5 | // $color-light-white: #f0f0f0; 6 | $color-red: #f05147; 7 | // $color-red-light: #ffd2d2; 8 | // $color-red-semi-light: #fff6f6; 9 | // $color-red-lighter: #fef6f6; 10 | $color-red-dark: #d9001b; 11 | $color-grey: #d6d6d6; 12 | $color-grey-light: #eeeeee; 13 | // $color-grey-semi-light: #828b95; 14 | // $color-grey-full-light: #f2f2f2; 15 | // $color-grey-lighter: #f8f8f8; 16 | // $color-grey-darker: #333333; 17 | $color-grey-dark: #8e8e8e; 18 | // $color-grey-semi-dark: #7b7b7b; 19 | // $color-grey-semi-darker: #717274; 20 | // $color-green: #64da6e; 21 | // $color-green-light: #00d400; 22 | // $color-green-lighter: #ebffeb; 23 | $color-green-dark: #008c14; 24 | $color-blue: #009cf9; 25 | // $color-blue-light: #8bbbff; 26 | // $color-blue-lighter: #cde9ff; 27 | // $color-blue-semi-light: #8dc7f5; 28 | // $color-blue-full-light: #f7fbff; 29 | // $color-blue-lighter: #f7fbff; 30 | // $color-blue-dark: #0000af; 31 | // $color-yellow: #ffd501; 32 | // $color-yellow-light: #f5de8d; 33 | // $color-yellow-lighter: #fffdf9; 34 | $color-orange: #ff854a; 35 | // $color-lime: #00ff00; 36 | // $color-cyan: #00ffff; 37 | // $color-magenta: #ff00ff; 38 | // $color-silver: #c0c0c0; 39 | // $color-maroon: #800000; 40 | // $color-olive: #808000; 41 | // $color-purple: #800080; 42 | // $color-teal: #008080; 43 | // $color-navy: #000080; 44 | // $color-turquoise: #12b9d2; 45 | // $color-gold: #cbbc29; 46 | // $color-brown: #523809; 47 | // $color-alice-blue: #f6f9ff; 48 | // $color-navy-blue: #0081e8; 49 | // $color-ice-blue: #e5f5fe; 50 | // $color-white-smoke: #fff2f1; 51 | // $color-very-light-pink: #fdeae9; 52 | // $color-very-light-pink-three: #fdedec; 53 | // $color-very-light-pink-four: #dddddd; 54 | // $color-alabaster: #fafafa; 55 | // $color-silver-chalice: #a7a7a7; 56 | // $color-gallery: #ececec; 57 | // $color-alice-blue-dark: #e5f5fe; 58 | // $color-fringy-flower: #bfe2c4; 59 | // $color-ghost: #ced4da; 60 | // $color-porcelain: #f5f7f8; 61 | // $color-space: #f6fbff; 62 | // $color-emerald: #47d764; 63 | 64 | /* CUSTOM COLOR */ 65 | $color-primary: #f05147; 66 | $color-button-primary: $color-primary; 67 | $color-badge-primary: $color-primary; 68 | $color-tab-active: $color-primary; 69 | $color-pagination-active: $color-primary; 70 | $color-checkbox-active: $color-primary; 71 | $color-radio-active: $color-primary; 72 | $color-disabled: #f5f5f5; 73 | $color-bg-disabled: #bebebe; 74 | $color-switch-off: #828b95; 75 | $color-switch-on: $color-primary; 76 | $color-error: $color-red; 77 | $color-text: #454545; 78 | $color-link: $color-blue; 79 | $color-dark: #454545; 80 | $color-bg-footer: $color-dark; 81 | $color-bg-footer-light: rgba($color-bg-footer, 0.5); 82 | $color-footer: #bebebe; 83 | $color-facebook: #4267b2; 84 | $color-bg-maintenance: #fdedec; 85 | $color-backdrop: rgba($color-black, 0.4); 86 | $color-form-field: $color-grey; 87 | $color-bg-body: $color-grey-light; 88 | 89 | /* OVERLAY COLOR */ 90 | $color-overlay-light-black: #080808; 91 | $color-overlay-light-grey: #464545; 92 | 93 | /* BOOTSTRAP OVERWRITE */ 94 | $primary: $color-primary; 95 | $success: $color-green-dark; 96 | $info: $color-blue; 97 | $warning: $color-orange; 98 | $danger: $color-red-dark; 99 | 100 | /* PATH */ 101 | $path-fonts: '/fonts'; 102 | $path-images: '/images'; 103 | $path-icons: '/icons'; 104 | 105 | /* ICONS */ 106 | 107 | /* IMAGES */ 108 | 109 | /* CUSTOM VARIABLES */ 110 | $body-font: 'Poppins', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 111 | 'Helvetica Neue'; 112 | $desktop-min-width: 768px; 113 | $desktop-max-width: 1366px; 114 | $desktop-spaces: 100px; 115 | $mobile-width-limit: 720px; 116 | $shadow: 0 3px 6px rgba($color-black, 0.15); 117 | $shadow2: 0 3px 3px rgba($color-black, 0.2); 118 | $shadow3: 0 -2px 16px 0 #dddddd; 119 | $border-collapse-grey-light: #eeeff0; 120 | $vertical-line: rgba(151, 151, 151, 0.2); 121 | $border-width: 1px !default; 122 | 123 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables 124 | // 125 | // The variables you want to modify 126 | // $font-size-root: 20px; 127 | 128 | // Variables you want to modify 129 | // $btn-border-radius: 0px; 130 | 131 | // If you need to extend Vuetify SASS lists 132 | // $material-light: ( cards: blue ); 133 | 134 | // Globals 135 | $body-font-family: $body-font; 136 | $heading-font-family: 'Montserrat', sans-serif; 137 | $border-radius-root: 6px; 138 | $font-size-root: 14px; 139 | 140 | // Variables must come before the import 141 | $btn-letter-spacing: 0; 142 | $btn-font-weight: 400; 143 | $list-item-title-font-size: 0.929rem; 144 | $list-item-dense-title-font-size: 0.929rem; 145 | $list-item-dense-title-font-weight: initial; 146 | 147 | // $list-item-icon-margin: 0px !default; 148 | $list-item-action-icon-margin: 16px !default; 149 | // $list-item-action-margin: 12px 0px !default; 150 | // $footer-padding : 6px 16px !default; 151 | 152 | $fab-icon-sizes: ( 153 | 'small': 20 154 | ); 155 | $btn-sizes: ( 156 | 'default': 41, 157 | 'large': 54 158 | ); 159 | $headings: ( 160 | 'h1': ( 161 | 'size': 3.3125rem, 162 | 'line-height': 1.15em 163 | ), 164 | 'h2': ( 165 | 'size': 2.25rem, 166 | 'line-height': 1.5em 167 | ) 168 | ); 169 | 170 | // $stepper-step-padding: 3rem !default 171 | 172 | // $ripple-animation-transition-in: transform 0.25s map-get($transition, 'fast-out-slow-in'), opacity 0.1s map-get($transition, 'fast-out-slow-in') !default; 173 | // $ripple-animation-transition-out: opacity 0.3s map-get($transition, 'fast-out-slow-in') !default; 174 | // $ripple-animation-visible-opacity: 0.25 !default; 175 | 176 | // $ripple-animation-transition-in: transform 0.25s, opacity 0.1s !default; 177 | // $ripple-animation-transition-out: opacity 0.3s !default; 178 | // $ripple-animation-visible-opacity: 0.25 !default; 179 | 180 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables 181 | // 182 | // The variables you want to modify 183 | // $font-size-root: 20px; 184 | -------------------------------------------------------------------------------- /assets/scss/components/_cards.scss: -------------------------------------------------------------------------------- 1 | @import '../config'; 2 | 3 | /* Components */ 4 | .card { 5 | position: relative; 6 | overflow: hidden; 7 | z-index: 1; 8 | &:before, 9 | &:after { 10 | content: ''; 11 | position: absolute; 12 | } 13 | &:before { 14 | top: 0rem; 15 | right: 0rem; 16 | width: 25px; 17 | height: 25px; 18 | background-color: transparent; 19 | border: 2px solid #838383; 20 | opacity: 0.15; 21 | transform: rotate(-40deg) translate(2px, 2px); 22 | border-radius: 50%; 23 | z-index: -1; 24 | 25 | // top: -.5rem; 26 | // left: -.15rem; 27 | // transform: rotate(20deg); 28 | // width: 0; 29 | // height: 0; 30 | // opacity: 0.15; 31 | // z-index: -1; 32 | // border-top: 25px solid transparent; 33 | // border-right: 50px solid #cdcdcd; 34 | // border-bottom: 25px solid transparent; 35 | 36 | // top: 10px; 37 | // left: 0; 38 | // z-index: -1; 39 | // width: 60px; 40 | // transform: rotate(-50deg); 41 | // height: 60px; 42 | // opacity: 0.5; 43 | // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC); 44 | // background-position: top center; 45 | // background-repeat: repeat; 46 | // background-attachment: scroll; 47 | } 48 | &:after { 49 | bottom: -1.95rem; 50 | right: -1.95rem; 51 | width: 80px; 52 | height: 80px; 53 | opacity: 0.5; 54 | transform: rotate(-40deg) scale(1); 55 | border-radius: 50%; 56 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC); 57 | background-position: top center; 58 | background-repeat: repeat; 59 | background-attachment: scroll; 60 | z-index: -1; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /assets/scss/components/_flexes.scss: -------------------------------------------------------------------------------- 1 | @import '../config'; 2 | 3 | .flex-center { 4 | display: flex; 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/components/_steps.scss: -------------------------------------------------------------------------------- 1 | @import '../config'; 2 | 3 | .steps { 4 | .step { 5 | &:first-child { 6 | .step-no-wrapper { 7 | &::before { 8 | display: none; 9 | } 10 | } 11 | } 12 | &:last-child { 13 | .step-no-wrapper { 14 | &::after { 15 | display: none; 16 | } 17 | } 18 | } 19 | .step-no-wrapper { 20 | position: relative; 21 | &::after, 22 | &::before { 23 | content: ''; 24 | display: block; 25 | border-top: 2px dashed $color-primary; 26 | position: absolute; 27 | top: 50%; 28 | transform: translate(0, -50%); 29 | width: 49%; 30 | } 31 | &:before { 32 | left: 0; 33 | } 34 | &:after { 35 | left: 50%; 36 | } 37 | .step-no { 38 | display: inline-block; 39 | position: relative; 40 | z-index: 2; 41 | color: $color-white; 42 | background: $color-primary; 43 | width: 28px; 44 | height: 28px; 45 | line-height: 28px; 46 | border-radius: 30px; 47 | font-weight: 600; 48 | font-size: 14px; 49 | text-align: center; 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /assets/scss/global.scss: -------------------------------------------------------------------------------- 1 | @import './normalize'; 2 | @import './config'; 3 | @import './fonts'; 4 | @import './base'; 5 | @import './helpers'; 6 | 7 | /* Customs Styles */ 8 | @import './customs'; 9 | 10 | /* Components */ 11 | @import './components/cards'; 12 | 13 | /* Theme Styles */ 14 | @import './theme'; 15 | -------------------------------------------------------------------------------- /assets/scss/theme.scss: -------------------------------------------------------------------------------- 1 | @import './variables'; 2 | 3 | /* 4 | .light--theme { 5 | background-color: rgba(0, 0, 0, 0.25); 6 | } 7 | .dark--theme { 8 | background-color: rgba(255, 255, 0, 0.25) 9 | } 10 | */ 11 | .page-enter-active, 12 | .page-leave-active { 13 | transition: opacity 0.5s; 14 | } 15 | .page-enter, 16 | .page-leave-to { 17 | opacity: 0; 18 | } 19 | 20 | /* Color Mode */ 21 | body[class='theme--light'] { 22 | background-color: $color-white; 23 | } 24 | body[class='theme--dark'] { 25 | background-color: $color-black; 26 | } 27 | 28 | .v-application { 29 | font-family: $body-font-family, sans-serif !important; 30 | 31 | .title { 32 | /* To pin point specific classes of some components */ 33 | font-family: $heading-font-family, sans-serif !important; 34 | } 35 | 36 | /* 37 | .v-list .v-list-item--active{ 38 | color: var(--warning--text) !important; 39 | } 40 | */ 41 | 42 | /* Theme Light */ 43 | &.theme--light { 44 | // background-color: rgba(155, 155, 155, 0.05); 45 | .v-navigation-drawer--floating.theme--light { 46 | &:before { 47 | content: ''; 48 | position: absolute; 49 | width: 100%; 50 | height: 100%; 51 | opacity: 0.5; 52 | /* background-image: linear-gradient(180deg,#3cd18a,#3c6fd1 .01%,#1a2d51); */ 53 | } 54 | } 55 | /* 56 | .v-navigation-drawer { 57 | background-color: #ececec; 58 | } 59 | */ 60 | /* 61 | .v-list-group { 62 | background-color: rgb(0, 0, 0, 0.25); 63 | } 64 | */ 65 | } 66 | /* Theme Light */ 67 | &.theme--dark { 68 | /* background-color: rgba(0, 0, 0, 0.75); */ 69 | .v-navigation-drawer--floating.theme--dark { 70 | background-image: linear-gradient(195deg, #42424a, #191919) !important; 71 | /* background-image: linear-gradient(60deg,#3cd18a,#3c6fd1 .01%,#7ca9ff); */ 72 | &:before { 73 | content: ''; 74 | position: absolute; 75 | width: 100%; 76 | height: 100%; 77 | opacity: 0.15; 78 | background-color: #191919; 79 | /* background-image: linear-gradient(180deg,#3cd18a,#3c6fd1 .01%,#091221); */ 80 | } 81 | } 82 | /* 83 | .v-list-group { 84 | background-color: rgba(0, 0, 0, 0.25); 85 | } 86 | */ 87 | /* 88 | .v-list-item--active.v-list-item--link { 89 | &:before { 90 | // background-color: var(--v-accent-base); 91 | background-color: rgba(0,0,0,0.175); 92 | } 93 | } 94 | */ 95 | } 96 | /* .theme-link { 97 | &:before, &:after { 98 | content:''; 99 | position: relative; 100 | } 101 | 102 | &:before { 103 | transition: width .5s, height .5s, border-bottom-color 0s; 104 | transition-delay: .5s, 0s, .5s; 105 | width: 200px; 106 | height: 64px; 107 | border-left: 3px solid #00e2ff; 108 | border-bottom: 3px solid #00e2ff; 109 | } 110 | 111 | &:after { 112 | transition: width .5s, height .5s, border-right-color .5s; 113 | transition-delay: 0s, .5s, .5s; 114 | width: 200px; 115 | height: 64px; 116 | border-top: 3px solid #00e2ff; 117 | border-right: 3px solid #00e2ff; 118 | } 119 | } */ 120 | 121 | .gradient-b-bottom { 122 | &:before { 123 | width: 100%; 124 | height: 100%; 125 | content: ''; 126 | position: absolute; 127 | left: 0; 128 | right: 0; 129 | top: 0; 130 | bottom: 0; 131 | z-index: -1; 132 | display: block; 133 | background: rgb(2, 0, 36); 134 | background: -moz-linear-gradient( 135 | 180deg, 136 | rgba(2, 0, 36, 0) 63%, 137 | rgba(0, 0, 0, 0.7) 100% 138 | ); 139 | background: -webkit-linear-gradient( 140 | 180deg, 141 | rgba(2, 0, 36, 0) 63%, 142 | rgba(0, 0, 0, 0.7) 100% 143 | ); 144 | background: linear-gradient( 145 | 180deg, 146 | rgba(2, 0, 36, 0) 63%, 147 | rgba(0, 0, 0, 0.7) 100% 148 | ); 149 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#000000",GradientType=1); 150 | } 151 | } 152 | /* default button icon */ 153 | .v-btn--icon { 154 | padding-left: 1.25rem; 155 | padding-right: 1.25rem; 156 | &:hover { 157 | opacity: 0.75; 158 | } 159 | &:before { 160 | background: none; 161 | } 162 | .v-ripple__container { 163 | display: none; 164 | &:before { 165 | background: none; 166 | } 167 | } 168 | } 169 | } 170 | 171 | .background-image-dark { 172 | background-image: url('https://images.unsplash.com/photo-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1152&h=940&q=80'); 173 | background-position: top center; 174 | background-size: cover; 175 | background-repeat: no-repeat; 176 | } 177 | 178 | .transparent-8 { 179 | background: rgba(255, 255, 255, 65%); 180 | } 181 | 182 | .title { 183 | &-page { 184 | margin-bottom: 12px; 185 | &-sub { 186 | margin-bottom: 10px; 187 | } 188 | } 189 | } 190 | 191 | .bg { 192 | &-wave { 193 | background-image: url('~/static/svg/wave.svg'); 194 | background-position: bottom center; 195 | background-repeat: no-repeat; 196 | &-dark { 197 | background-image: url('~/static/svg/wave-dark.svg'); 198 | background-position: bottom center; 199 | background-repeat: no-repeat; 200 | } 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'] 3 | } 4 | -------------------------------------------------------------------------------- /components/Card/Summary.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 70 | -------------------------------------------------------------------------------- /components/Footer.vue: -------------------------------------------------------------------------------- 1 | 19 | 33 | -------------------------------------------------------------------------------- /components/Form/ForgotPassword.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 58 | -------------------------------------------------------------------------------- /components/Form/SignIn.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 84 | -------------------------------------------------------------------------------- /components/Form/SignUp.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 80 | -------------------------------------------------------------------------------- /components/Header/PageHeader.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /components/NuxtLogo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /components/SeoHead.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 273 | -------------------------------------------------------------------------------- /components/Tutorial.vue: -------------------------------------------------------------------------------- 1 | 2 | 117 | 118 | 123 | -------------------------------------------------------------------------------- /components/VuetifyLogo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | -------------------------------------------------------------------------------- /constants/actionTypes.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcoderoad/nuxtjs-vuetify-dashboard/a7f0bdeb591922dd3b65f08e915ee781f86e0a85/constants/actionTypes.ts -------------------------------------------------------------------------------- /constants/global.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Nuxtify Admin Dashboard Template', 3 | description: 'Nuxtify Admin Dashboard Template for Web Application Project', 4 | company: 'Dykraf', 5 | image: '/logo@2x.png', 6 | url: process.env.BASE_URL, 7 | lang: 'en', 8 | slogan: 'Web Development', 9 | copyright: '© All right Reserved by Dykraf' 10 | } 11 | -------------------------------------------------------------------------------- /constants/routes.ts: -------------------------------------------------------------------------------- 1 | const AUTH = { 2 | SIGNIN: { 3 | href: '/auth/signIn.vue', 4 | route: '/sign-in', 5 | url: '/sign-in' 6 | }, 7 | SIGNUP: { 8 | href: '/auth/signUp.vue', 9 | route: '/sign-up', 10 | url: '/sign-up' 11 | }, 12 | FORGOTPASSWORD: { 13 | href: '/auth/forgotPassword.vue', 14 | route: '/forgot-password', 15 | url: '/forgot-password' 16 | } 17 | } 18 | 19 | const DASHBOARD = { 20 | HOME: { 21 | href: '/index.vue', 22 | route: '/', 23 | url: '/' 24 | }, 25 | FORM: { 26 | href: '/forms.vue', 27 | route: '/forms', 28 | url: '/forms' 29 | }, 30 | TYPOGRAPHY: { 31 | href: '/typography.vue', 32 | route: '/typography', 33 | url: '/typography' 34 | }, 35 | TABLE: { 36 | href: '/tables.vue', 37 | route: '/tables', 38 | url: '/tables' 39 | }, 40 | TABS: { 41 | href: '/tabs.vue', 42 | route: '/tabs', 43 | url: '/tabs' 44 | }, 45 | FILTERS: { 46 | href: '/filters.vue', 47 | route: '/filters', 48 | url: '/filters' 49 | }, 50 | CHART: { 51 | href: '/charts.vue', 52 | route: '/charts', 53 | url: '/charts' 54 | }, 55 | PROFILE: { 56 | href: '/profile.vue', 57 | route: '/profile', 58 | url: '/profile' 59 | }, 60 | SETTING: { 61 | href: '/settings.vue', 62 | route: '/user-settings', 63 | url: '/setting' 64 | }, 65 | CARD: { href: '/cards.vue', route: '/cards', url: '/cards' }, 66 | ICON: { href: '/icons.vue', route: '/icons', url: '/icons' }, 67 | LANDING: { href: '/landing.vue', route: '/landing', url: '/landing' }, 68 | PARAGRAPH: { href: '/paragraph.vue', route: '/paragraph', url: '/paragraph' }, 69 | HEADING: { href: '/headings.vue', route: '/headings', url: '/headings' } 70 | } 71 | 72 | // const API = { 73 | // API_SALES: { 74 | // url: '/data-sales' 75 | // // route: '' 76 | // }, 77 | // API_REVENUE: { 78 | // url: '/data-revenue' 79 | // // route: '' 80 | // }, 81 | // API_CUSTOMER: { 82 | // url: '/data-customer' 83 | // // route: '' 84 | // }, 85 | // API_PRODUCT: { 86 | // url: '/data-product' 87 | // // route: '' 88 | // }, 89 | // API_CHANNEL: { 90 | // url: '/data-channel' 91 | // // route: '' 92 | // }, 93 | // API_TIMELINE: { 94 | // url: '/data-channel' 95 | // // route: '' 96 | // } 97 | // } 98 | 99 | const API = { 100 | API: { 101 | href: '/api/v1', 102 | route: '/api/v1', 103 | url: '/api/v1' 104 | } 105 | } 106 | 107 | module.exports = { ...AUTH, ...DASHBOARD, ...API } 108 | -------------------------------------------------------------------------------- /constants/statusTypes.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | INIT: 'init', 3 | LOADING: 'loading', 4 | SUCCESS: 'success', 5 | ERROR: 'error' 6 | } 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '^@/(.*)$': '/$1', 4 | '^~/(.*)$': '/$1', 5 | '^vue$': 'vue/dist/vue.common.js' 6 | }, 7 | moduleFileExtensions: ['ts', 'js', 'vue', 'json'], 8 | transform: { 9 | '^.+\\.ts$': 'ts-jest', 10 | '^.+\\.js$': 'babel-jest', 11 | '.*\\.(vue)$': 'vue-jest' 12 | }, 13 | collectCoverage: true, 14 | collectCoverageFrom: [ 15 | '/components/**/*.vue', 16 | '/pages/**/*.vue' 17 | ], 18 | testEnvironment: 'jsdom' 19 | } 20 | -------------------------------------------------------------------------------- /layouts/blank.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | 39 | 40 | 43 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 235 | 236 | 409 | 410 | 411 | 414 | -------------------------------------------------------------------------------- /layouts/error.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 38 | 39 | 40 | 43 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import colors from 'vuetify/es5/util/colors' 2 | 3 | /** constants */ 4 | import ROUTES from './constants/routes' 5 | import GLOBAL from './constants/global' 6 | 7 | /** current environment */ 8 | const CURRENT_ENV = process.env.ENV || 'prod' 9 | const isProduction = CURRENT_ENV === 'prod' 10 | 11 | /** global constants **/ 12 | const { title, description, lang } = GLOBAL 13 | 14 | const BASEURL = 15 | process.env.NODE_ENV === 'development' 16 | ? 'http://localhost:3000' 17 | : 'https://nuxtjs-vuetify-dashboard.netlify.app' 18 | 19 | export default { 20 | // Target: https://go.nuxtjs.dev/config-target 21 | target: 'static', 22 | 23 | // Global page headers: https://go.nuxtjs.dev/config-head 24 | head: { 25 | titleTemplate: `%s - nuxtjs-vuetify-dashboard${ 26 | (!isProduction && ' - Dev') || '' 27 | }`, 28 | title, 29 | description, 30 | htmlAttrs: { 31 | lang 32 | }, 33 | meta: [ 34 | { charset: 'utf-8' }, 35 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 36 | { hid: 'description', name: 'description', content: '' }, 37 | { name: 'format-detection', content: 'telephone=no' } 38 | ], 39 | link: [ 40 | { 41 | rel: 'preconnect', 42 | hid: 'preconnect', 43 | href: 'https://fonts.gstatic.com' 44 | }, 45 | { 46 | rel: 'preconnect', 47 | hid: 'preconnect', 48 | href: 'https://fonts.googleapis.com' 49 | }, 50 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 51 | { 52 | rel: 'stylesheet', 53 | hid: 'font-stylesheet', 54 | href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@100;200;300;400;700;900&Montserrat:wght@100;200;300;400;500;600;700;800;900&Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap' 55 | } 56 | ] 57 | }, 58 | 59 | // Global CSS: https://go.nuxtjs.dev/config-css 60 | css: [ 61 | // SCSS file in the project 62 | '~/assets/scss/global.scss' 63 | ], 64 | 65 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 66 | plugins: [ 67 | { src: '~/plugins/chart.js', mode: 'client' }, 68 | { src: '~/plugins/apex-chart.js', mode: 'client' }, 69 | { src: '~/plugins/axios.js' } 70 | ], 71 | 72 | // Auto import components: https://go.nuxtjs.dev/config-components 73 | components: true, 74 | 75 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 76 | buildModules: [ 77 | // https://go.nuxtjs.dev/typescript 78 | '@nuxt/typescript-build', 79 | // https://go.nuxtjs.dev/stylelint 80 | '@nuxtjs/stylelint-module', 81 | // https://go.nuxtjs.dev/vuetify 82 | '@nuxtjs/vuetify' 83 | ], 84 | 85 | // Modules: https://go.nuxtjs.dev/config-modules 86 | modules: [ 87 | // https://go.nuxtjs.dev/axios 88 | '@nuxtjs/axios' 89 | ], 90 | 91 | // Axios module configuration: https://go.nuxtjs.dev/config-axios 92 | axios: { 93 | // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 94 | baseURL: BASEURL, 95 | proxy: true 96 | }, 97 | 98 | // https://axios.nuxtjs.org/options/#proxy 99 | proxy: { 100 | '/json': { 101 | target: BASEURL, 102 | pathRewrite: { 103 | '^/json': '/json' // static files in json dir 104 | } 105 | } 106 | }, 107 | 108 | // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify 109 | vuetify: { 110 | customVariables: ['~/assets/scss/variables.scss'], 111 | customProperties: true, 112 | treeShake: true, 113 | defaultAssets: { 114 | font: { 115 | family: 'Montserrat:wght@100;200;300;400;500;600;700;800;900' 116 | } 117 | }, 118 | theme: { 119 | // dark: true, 120 | // default: 'light', 121 | options: { 122 | /* variations: false */ 123 | customProperties: true, 124 | cspNonce: 'dQw4w9WgXcQ' 125 | /* themeCache: { 126 | get: (key) => localStorage.getItem(key), 127 | set: (key, value) => localStorage.setItem(key, value) 128 | } */ 129 | }, 130 | themes: { 131 | dark: { 132 | primary: colors.blue.darken2, 133 | accent: colors.grey.darken3, 134 | secondary: colors.grey.darken1, 135 | info: colors.teal.lighten1, 136 | warning: colors.amber.base, 137 | error: colors.deepOrange.accent4, 138 | success: colors.green.accent3 139 | }, 140 | light: { 141 | primary: colors.blue.darken2, 142 | accent: colors.grey.darken3, 143 | secondary: colors.grey.darken1, 144 | info: colors.teal.lighten1, 145 | warning: colors.amber.base, 146 | error: colors.deepOrange.accent4, 147 | success: colors.green.accent3 148 | } 149 | } 150 | } 151 | }, 152 | 153 | router: { 154 | trailingSlash: false, 155 | extendRoutes(nuxtRoutes, resolve) { 156 | const routes = [] 157 | const totalExistingRoutes = nuxtRoutes.length 158 | 159 | if (ROUTES) { 160 | for (const name in ROUTES) { 161 | if ( 162 | // eslint-disable-next-line no-prototype-builtins 163 | ROUTES.hasOwnProperty(name) && 164 | name !== 'API' && 165 | name !== 'PUBLIC' 166 | ) { 167 | const route = ROUTES[name] 168 | const { route: path, href: component } = route 169 | if (path && component) { 170 | const chunkName = `pages${component}` 171 | routes.push({ 172 | name, 173 | path, 174 | component: resolve(__dirname, `pages/${component}`), 175 | chunkName: chunkName.replace(/.vue/g, '') 176 | }) 177 | } 178 | } 179 | } 180 | 181 | nuxtRoutes.unshift(...routes) 182 | nuxtRoutes.length = nuxtRoutes.length - totalExistingRoutes 183 | } 184 | } 185 | }, 186 | 187 | // https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware 188 | // serverMiddleware: [ 189 | // // Will register file from project server-middleware directory to handle /server-middleware/* requires 190 | // { path: '/api/v1', handler: '~/api/index.js' } 191 | // ], 192 | 193 | // Build Configuration: https://go.nuxtjs.dev/config-build 194 | build: { 195 | cssSourceMap: false 196 | /* extend(config, { isClient }) { 197 | // Extend only webpack config for client-bundle 198 | if (isClient) { 199 | config.devtool = 'source-map'; 200 | } 201 | }, */ 202 | }, 203 | 204 | // The watch property lets you watch custom files for restarting the server. 205 | watch: ['~/static/json/*.js*'] 206 | } 207 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxtjs-vuetify-dashboard", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .", 11 | "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore", 12 | "lint:prettier": "prettier --check .", 13 | "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier", 14 | "lintfix": "prettier --write --list-different . && yarn lint:js --fix && yarn lint:style --fix", 15 | "prepare": "husky install", 16 | "test": "jest" 17 | }, 18 | "lint-staged": { 19 | "*.{js,ts,vue}": "eslint --cache", 20 | "*.{css,scss,sass,html,vue}": "stylelint", 21 | "*.**": "prettier --check --ignore-unknown" 22 | }, 23 | "dependencies": { 24 | "@nuxtjs/axios": "^5.13.6", 25 | "chart.js": "^3.8.2", 26 | "core-js": "^3.19.3", 27 | "nuxt": "^2.15.8", 28 | "vue": "^2.6.14", 29 | "vue-chartjs": "^4.1.1", 30 | "vue-server-renderer": "^2.6.14", 31 | "vue-template-compiler": "^2.6.14", 32 | "vuetify": "^2.6.1", 33 | "webpack": "^4.46.0" 34 | }, 35 | "devDependencies": { 36 | "@babel/eslint-parser": "^7.16.3", 37 | "@commitlint/cli": "^15.0.0", 38 | "@commitlint/config-conventional": "^15.0.0", 39 | "@nuxt/types": "^2.15.8", 40 | "@nuxt/typescript-build": "^2.1.0", 41 | "@nuxtjs/eslint-config-typescript": "^8.0.0", 42 | "@nuxtjs/eslint-module": "^3.0.2", 43 | "@nuxtjs/stylelint-module": "^4.1.0", 44 | "@nuxtjs/vuetify": "^1.12.3", 45 | "@vue/test-utils": "^1.3.0", 46 | "apexcharts": "^3.36.3", 47 | "babel-core": "7.0.0-bridge.0", 48 | "babel-jest": "^27.4.4", 49 | "eslint": "^8.4.1", 50 | "eslint-config-prettier": "^8.3.0", 51 | "eslint-plugin-nuxt": "^3.1.0", 52 | "eslint-plugin-vue": "^8.2.0", 53 | "husky": "^7.0.4", 54 | "jest": "^27.4.4", 55 | "lint-staged": "^12.1.2", 56 | "postcss-html": "^1.3.0", 57 | "prettier": "^2.5.1", 58 | "stylelint": "^14.1.0", 59 | "stylelint-config-prettier": "^9.0.3", 60 | "stylelint-config-recommended-vue": "^1.1.0", 61 | "stylelint-config-standard": "^24.0.0", 62 | "ts-jest": "^27.1.1", 63 | "vue-apexcharts": "^1.6.2", 64 | "vue-jest": "^3.0.4", 65 | "vuelidate": "^0.7.7" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /pages/auth/forgotPassword.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /pages/auth/signIn.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 32 | -------------------------------------------------------------------------------- /pages/auth/signUp.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 32 | -------------------------------------------------------------------------------- /pages/cards.vue: -------------------------------------------------------------------------------- 1 | 146 | 147 | 318 | -------------------------------------------------------------------------------- /pages/filters.vue: -------------------------------------------------------------------------------- 1 | 116 | 117 | 226 | 227 | 230 | -------------------------------------------------------------------------------- /pages/headings.vue: -------------------------------------------------------------------------------- 1 | 325 | 326 | 375 | -------------------------------------------------------------------------------- /pages/icons.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 72 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 239 | 240 | 335 | -------------------------------------------------------------------------------- /pages/landing.vue: -------------------------------------------------------------------------------- 1 | 175 | 176 | 210 | -------------------------------------------------------------------------------- /pages/paragraph.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 111 | -------------------------------------------------------------------------------- /pages/profile.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 63 | -------------------------------------------------------------------------------- /pages/settings.vue: -------------------------------------------------------------------------------- 1 | 54 | 61 | -------------------------------------------------------------------------------- /pages/tables.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 201 | -------------------------------------------------------------------------------- /pages/tabs.vue: -------------------------------------------------------------------------------- 1 | 170 | 171 | 282 | -------------------------------------------------------------------------------- /pages/typography.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 64 | -------------------------------------------------------------------------------- /plugins/apex-chart.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueApexCharts from 'vue-apexcharts' 3 | 4 | // import { Bar, Line, Doughnut, Pie } from 'vue-chartjs/legacy' 5 | // import { 6 | // Chart as ChartJS, 7 | // Title, 8 | // Tooltip, 9 | // Legend, 10 | // BarElement, 11 | // CategoryScale, 12 | // LinearScale, 13 | // LineElement, 14 | // PointElement, 15 | // ArcElement 16 | // } from 'chart.js' 17 | 18 | Vue.component('ApexCharts', { 19 | extends: VueApexCharts 20 | }) 21 | -------------------------------------------------------------------------------- /plugins/axios.js: -------------------------------------------------------------------------------- 1 | export default function ({ $axios, error: nuxtError }) { 2 | $axios.onError((error) => { 3 | nuxtError({ 4 | statusCode: error.response.status, 5 | message: error.message 6 | }) 7 | return Promise.resolve(false) 8 | }) 9 | } 10 | -------------------------------------------------------------------------------- /plugins/chart.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable vue/one-component-per-file */ 2 | import Vue from 'vue' 3 | import { Bar, Line, Doughnut, Pie } from 'vue-chartjs/legacy' 4 | import { 5 | Chart as ChartJS, 6 | Title, 7 | Tooltip, 8 | Legend, 9 | BarElement, 10 | CategoryScale, 11 | LinearScale, 12 | LineElement, 13 | PointElement, 14 | ArcElement 15 | } from 'chart.js' 16 | 17 | ChartJS.register( 18 | Title, 19 | Tooltip, 20 | Legend, 21 | PointElement, 22 | BarElement, 23 | CategoryScale, 24 | LinearScale, 25 | LineElement, 26 | ArcElement 27 | ) 28 | 29 | Vue.component('LineChart', { 30 | extends: Line 31 | }) 32 | 33 | Vue.component('DoughnutChart', { 34 | extends: Doughnut 35 | }) 36 | 37 | Vue.component('BarChart', { 38 | extends: Bar 39 | }) 40 | 41 | Vue.component('PieChart', { 42 | extends: Pie 43 | }) 44 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcoderoad/nuxtjs-vuetify-dashboard/a7f0bdeb591922dd3b65f08e915ee781f86e0a85/static/favicon.ico -------------------------------------------------------------------------------- /static/json/buildings.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "Side Parkdale House Balwyn Photography: Dylan on Unsplash", 6 | "category": "Modern Design", 7 | "color": "black", 8 | "views": 1341, 9 | "imageUrl": "https://images.unsplash.com/photo-1600585154526-990dced4db0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" 10 | }, 11 | { 12 | "id": 2, 13 | "name": "R ARCHITECTURE @rarchitecture_melbourne on Unsplash", 14 | "category": "Modern Design", 15 | "color": "black", 16 | "views": 1341, 17 | "imageUrl": "https://images.unsplash.com/photo-1604709177595-ee9c2580e9a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" 18 | }, 19 | { 20 | "id": 3, 21 | "name": "Front Parkdale House Balwyn Photography: Dylan on Unsplash", 22 | "category": "Modern Design", 23 | "color": "black", 24 | "views": 1341, 25 | "imageUrl": "https://images.unsplash.com/photo-1604709177595-ee9c2580e9a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" 26 | }, 27 | { 28 | "id": 4, 29 | "name": "Hinkler House Glen Waverley Photography: Tatjana Plitt on Unsplash", 30 | "category": "Modern Design", 31 | "color": "black", 32 | "views": 1341, 33 | "imageUrl": "https://images.unsplash.com/photo-1600573472592-401b489a3cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" 34 | } 35 | ], 36 | "statusCode": 200, 37 | "message": "success" 38 | } 39 | -------------------------------------------------------------------------------- /static/json/channels.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "Twitter", 6 | "category": "Social Media", 7 | "color": "green", 8 | "summary": 1341 9 | }, 10 | { 11 | "id": 3, 12 | "name": "Pinterest", 13 | "category": "Social Media", 14 | "color": "maroon", 15 | "summary": 1234 16 | }, 17 | { 18 | "id": 4, 19 | "name": "Facebook", 20 | "category": "Social Media", 21 | "color": "blue", 22 | "summary": 234 23 | }, 24 | { 25 | "id": 5, 26 | "name": "TikTok", 27 | "category": "Social Media", 28 | "color": "grey", 29 | "summary": 124 30 | }, 31 | { 32 | "id": 6, 33 | "name": "Instagram", 34 | "category": "Social Media", 35 | "color": "brown", 36 | "summary": 131 37 | }, 38 | { 39 | "id": 7, 40 | "name": "LinkedIn", 41 | "category": "Social Media", 42 | "color": "indigo", 43 | "summary": 878 44 | }, 45 | { 46 | "id": 8, 47 | "name": "YouTube", 48 | "category": "Social Media", 49 | "color": "red", 50 | "summary": 412 51 | }, 52 | { 53 | "id": 9, 54 | "name": "Vimeo", 55 | "category": "Social Media", 56 | "color": "orange", 57 | "summary": 420 58 | } 59 | ], 60 | "statusCode": 200, 61 | "message": "success" 62 | } 63 | -------------------------------------------------------------------------------- /static/json/foods.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "Editorial, Food & Drink", 6 | "category": "Salad", 7 | "color": "black", 8 | "views": 41, 9 | "price": 4.5, 10 | "imageUrl": "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=1152&q=80" 11 | }, 12 | { 13 | "id": 2, 14 | "name": "Pizza Slices", 15 | "category": "Meal", 16 | "color": "maroon", 17 | "views": 30, 18 | "price": 6, 19 | "imageUrl": "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=1152&q=80" 20 | }, 21 | { 22 | "id": 3, 23 | "name": "Bread Cracker", 24 | "category": "Cracker", 25 | "color": "black", 26 | "views": 23, 27 | "price": 3, 28 | "imageUrl": "https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=1152&q=80" 29 | }, 30 | { 31 | "id": 4, 32 | "name": "Grilled Chicken", 33 | "category": "Meat", 34 | "color": "black", 35 | "views": 76, 36 | "price": 12.5, 37 | "imageUrl": "https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=1152&q=80" 38 | } 39 | ], 40 | "statusCode": 200, 41 | "message": "success" 42 | } 43 | -------------------------------------------------------------------------------- /static/json/products.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "Product One", 6 | "slug": "product-one", 7 | "color": "#f1f1f1", 8 | "description": "Description of product one", 9 | "price": "21.22", 10 | "stock": 3, 11 | "review": 3 12 | }, 13 | { 14 | "id": 2, 15 | "name": "Product Two", 16 | "slug": "product-two", 17 | "color": "#99ff00", 18 | "description": "Description of product two", 19 | "price": "121.45", 20 | "stock": 12, 21 | "review": 4 22 | }, 23 | { 24 | "id": 3, 25 | "name": "Product Three", 26 | "slug": "product-three", 27 | "color": "#ff0099", 28 | "description": "Description of product three", 29 | "price": "42.13", 30 | "stock": 12, 31 | "review": 4 32 | }, 33 | { 34 | "id": 4, 35 | "name": "Product Four", 36 | "slug": "product-four", 37 | "color": "#ff9999", 38 | "description": "Description of product four", 39 | "price": "220", 40 | "stock": 2, 41 | "review": 2 42 | }, 43 | { 44 | "id": 5, 45 | "name": "Product Five", 46 | "slug": "product-five", 47 | "color": "#ff0000", 48 | "description": "Description of product five", 49 | "price": "73", 50 | "stock": 9, 51 | "review": 5 52 | }, 53 | { 54 | "id": 6, 55 | "name": "Product Six", 56 | "slug": "product-six", 57 | "color": "#f9f9f9", 58 | "description": "Description of product six", 59 | "price": "39", 60 | "stock": 3, 61 | "review": 4 62 | } 63 | ], 64 | "statusCode": 200, 65 | "message": "success" 66 | } 67 | -------------------------------------------------------------------------------- /static/json/projects.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "Apps", 6 | "color": "#999999", 7 | "status": "completed", 8 | "summary": 102 9 | }, 10 | { 11 | "id": 2, 12 | "name": "Web", 13 | "color": "#ff9900", 14 | "status": "completed", 15 | "summary": 43 16 | }, 17 | { 18 | "id": 3, 19 | "name": "iOS", 20 | "status": "completed", 21 | "color": "#339900", 22 | "summary": 32 23 | }, 24 | { 25 | "id": 4, 26 | "name": "Android", 27 | "status": "completed", 28 | "color": "#009944", 29 | "summary": 24 30 | }, 31 | { 32 | "id": 5, 33 | "name": "OS", 34 | "status": "completed", 35 | "color": "#887700", 36 | "summary": 90 37 | }, 38 | { 39 | "id": 6, 40 | "name": "Events", 41 | "color": "#999900", 42 | "status": "completed", 43 | "summary": 20 44 | } 45 | ], 46 | "statusCode": 200, 47 | "message": "success" 48 | } 49 | -------------------------------------------------------------------------------- /static/json/sales.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "label": "John Doe", 6 | "backgroundColor": "#ff0099", 7 | "borderColor": "red", 8 | "data": [40, 39, 10, 40, 39, 80, 40, 30, 10, 20, 30, 40], 9 | "createdAt": "12-08-2021 03:23:23" 10 | }, 11 | { 12 | "id": 2, 13 | "label": "Jane Doe", 14 | "backgroundColor": "#ff9900", 15 | "borderColor": "green", 16 | "data": [20, 9, 80, 90, 29, 100, 80, 20, 30, 40, 55, 75], 17 | "createdAt": "12-08-2021 06:12:29" 18 | }, 19 | { 20 | "id": 3, 21 | "label": "Jack Doe", 22 | "backgroundColor": "#999999", 23 | "borderColor": "blue", 24 | "data": [10, 24, 42, 50, 69, 10, 20, 70, 80, 45, 35, 42], 25 | "createdAt": "12-08-2021 06:12:29" 26 | }, 27 | { 28 | "id": 4, 29 | "label": "Miles Markson", 30 | "backgroundColor": "#88ff22", 31 | "borderColor": "blue", 32 | "data": [10, 24, 42, 50, 69, 10, 20, 70, 95, 45, 35, 42], 33 | "createdAt": "12-08-2021 06:12:29" 34 | } 35 | ], 36 | "statusCode": 200, 37 | "message": "success" 38 | } 39 | -------------------------------------------------------------------------------- /static/json/summary.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": { 3 | "sales": [ 4 | { 5 | "id": 1, 6 | "name": "26-01-2020", 7 | "summary": 53 8 | }, 9 | { 10 | "id": 2, 11 | "name": "26-02-2020", 12 | "summary": 67 13 | }, 14 | { 15 | "id": 3, 16 | "name": "26-03-2020", 17 | "summary": 78 18 | }, 19 | { 20 | "id": 4, 21 | "name": "26-04-2020", 22 | "summary": 82 23 | }, 24 | { 25 | "id": 5, 26 | "name": "26-05-2020", 27 | "summary": 88 28 | }, 29 | { 30 | "id": 6, 31 | "name": "26-06-2020", 32 | "summary": 91 33 | }, 34 | { 35 | "id": 7, 36 | "name": "26-07-2020", 37 | "summary": 94 38 | }, 39 | { 40 | "id": 8, 41 | "name": "26-08-2020", 42 | "summary": 95 43 | }, 44 | { 45 | "id": 9, 46 | "name": "26-09-2020", 47 | "summary": 100 48 | }, 49 | { 50 | "id": 10, 51 | "name": "26-10-2020", 52 | "summary": 104 53 | }, 54 | { 55 | "id": 11, 56 | "name": "26-11-2020", 57 | "summary": 108 58 | }, 59 | { 60 | "id": 12, 61 | "name": "26-12-2020", 62 | "summary": 112 63 | } 64 | ], 65 | "views": [ 66 | { 67 | "id": 1, 68 | "name": "01-01-2020", 69 | "summary": 2353 70 | }, 71 | { 72 | "id": 2, 73 | "name": "02-01-2020", 74 | "summary": 2267 75 | }, 76 | { 77 | "id": 3, 78 | "name": "03-01-2020", 79 | "summary": 1278 80 | }, 81 | { 82 | "id": 4, 83 | "name": "04-01-2020", 84 | "summary": 1382 85 | }, 86 | { 87 | "id": 5, 88 | "name": "05-01-2020", 89 | "summary": 2488 90 | }, 91 | { 92 | "id": 6, 93 | "name": "06-01-2020", 94 | "summary": 4391 95 | }, 96 | { 97 | "id": 7, 98 | "name": "07-01-2020", 99 | "summary": 2294 100 | }, 101 | { 102 | "id": 8, 103 | "name": "08-01-2020", 104 | "summary": 3295 105 | }, 106 | { 107 | "id": 9, 108 | "name": "09-01-2020", 109 | "summary": 4310 110 | }, 111 | { 112 | "id": 10, 113 | "name": "10-01-2020", 114 | "summary": 1304 115 | }, 116 | { 117 | "id": 11, 118 | "name": "11-01-2020", 119 | "summary": 2108 120 | }, 121 | { 122 | "id": 12, 123 | "name": "12-01-2020", 124 | "summary": 4112 125 | } 126 | ] 127 | }, 128 | "statusCode": 200, 129 | "message": "success" 130 | } 131 | -------------------------------------------------------------------------------- /static/json/users.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "User One", 6 | "username": "user-one", 7 | "birthDate": "12-12-1990", 8 | "gender": "m", 9 | "createdAt": "12-02-2022 12:02:02" 10 | }, 11 | { 12 | "id": 2, 13 | "name": "User Two", 14 | "username": "user-two", 15 | "birthDate": "12-12-1992", 16 | "gender": "f", 17 | "createdAt": "12-02-2022 12:02:02" 18 | }, 19 | { 20 | "id": 3, 21 | "name": "User Three", 22 | "username": "user-three", 23 | "birthDate": "12-12-1989", 24 | "gender": "m", 25 | "createdAt": "10-01-2022 02:01:01" 26 | }, 27 | { 28 | "id": 4, 29 | "name": "User Four", 30 | "username": "user-four", 31 | "birthDate": "12-12-1984", 32 | "gender": "m", 33 | "createdAt": "10-01-2022 01:01:01" 34 | }, 35 | { 36 | "id": 5, 37 | "name": "User Five", 38 | "username": "user-five", 39 | "birthDate": "12-12-1992", 40 | "gender": "f", 41 | "createdAt": "10-01-2022 01:23:01" 42 | }, 43 | { 44 | "id": 6, 45 | "name": "User Six", 46 | "username": "user-six", 47 | "birthDate": "12-12-1996", 48 | "gender": "m", 49 | "createdAt": "10-01-2022 02:01:01" 50 | }, 51 | { 52 | "id": 7, 53 | "name": "User Seven", 54 | "username": "user-seven", 55 | "birthDate": "12-12-1989", 56 | "gender": "f", 57 | "createdAt": "09-01-2022 02:01:01" 58 | }, 59 | { 60 | "id": 8, 61 | "name": "User Eight", 62 | "username": "user-eight", 63 | "birthDate": "12-12-1994", 64 | "gender": "f", 65 | "createdAt": "08-01-2022 02:01:01" 66 | } 67 | ], 68 | "statusCode": 200, 69 | "message": "success" 70 | } 71 | -------------------------------------------------------------------------------- /static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcoderoad/nuxtjs-vuetify-dashboard/a7f0bdeb591922dd3b65f08e915ee781f86e0a85/static/logo.png -------------------------------------------------------------------------------- /static/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcoderoad/nuxtjs-vuetify-dashboard/a7f0bdeb591922dd3b65f08e915ee781f86e0a85/static/logo@2x.png -------------------------------------------------------------------------------- /static/nuxt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcoderoad/nuxtjs-vuetify-dashboard/a7f0bdeb591922dd3b65f08e915ee781f86e0a85/static/nuxt.png -------------------------------------------------------------------------------- /static/svg/wave-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/svg/wave-triple-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/svg/wave-triple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/svg/wave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devcoderoad/nuxtjs-vuetify-dashboard/a7f0bdeb591922dd3b65f08e915ee781f86e0a85/static/v.png -------------------------------------------------------------------------------- /static/vuetify-logo.svg: -------------------------------------------------------------------------------- 1 | Artboard 46 2 | -------------------------------------------------------------------------------- /store/core/index.js: -------------------------------------------------------------------------------- 1 | const INITIALIZE_STORE = 'INITIALIZE_STORE' 2 | const DARK_LOAD = 'DARK_LOAD' 3 | const ASIDE_LOAD = 'ASIDE_LOAD' 4 | const ASIDEMIN_LOAD = 'ASIDEMIN_LOAD' 5 | const MINASIDE_LOAD = 'MINASIDE_LOAD' 6 | const TOPNAVFULL_LOAD = 'TOPNAVFULL_LOAD' 7 | const BOTNAVFIX_LOAD = 'BOTNAVFIX_LOAD' 8 | 9 | // type ThemeType = { 10 | // isDark: boolean 11 | // isAsideHide: boolean 12 | // isAsideMin: boolean 13 | // isMinAside: boolean 14 | // isTopNavFull: boolean 15 | // isBotNavFix: boolean 16 | // } 17 | 18 | const state = () => ({ 19 | theme: { 20 | isDark: false, 21 | isAsideHide: false, 22 | isAsideMin: false, 23 | isMinAside: false, 24 | isTopNavFull: false, 25 | isBotNavFix: false 26 | } 27 | }) 28 | 29 | const getters = { 30 | getIsDarkMode: (state) => state.theme.isDark 31 | } 32 | 33 | const mutations = { 34 | /* Execute this mutation on client */ 35 | [INITIALIZE_STORE](state) { 36 | const { app } = this 37 | const themeStore = JSON.parse(localStorage.getItem('nuxtify') || 'null') 38 | // console.log(state.theme) 39 | if (themeStore) { 40 | state.theme.isDark = themeStore.isDark 41 | app.vuetify.framework.theme.dark = themeStore.isDark 42 | } else { 43 | localStorage.setItem('nuxtify', JSON.stringify(state.theme)) 44 | // state.theme.isDark = !state.theme.isDark 45 | app.vuetify.framework.theme.dark = state.theme.isDark 46 | } 47 | }, 48 | [DARK_LOAD](state, payload) { 49 | state.theme.isDark = payload?.isDark 50 | localStorage.setItem('nuxtify', JSON.stringify(state.theme)) 51 | }, 52 | [ASIDE_LOAD](state, payload) { 53 | state.theme.isAsideHide = payload?.isAsideHide 54 | }, 55 | [ASIDEMIN_LOAD](state, payload) { 56 | state.theme.isAsideMin = payload?.isAsideMin 57 | }, 58 | [MINASIDE_LOAD](state, payload) { 59 | state.theme.isMinAside = payload?.isMinAside 60 | }, 61 | [TOPNAVFULL_LOAD](state, payload) { 62 | state.theme.isTopNavFull = payload?.isTopNavFull 63 | }, 64 | [BOTNAVFIX_LOAD](state, payload) { 65 | state.theme.isBotNavFix = payload?.isBotNavFix 66 | } 67 | } 68 | 69 | const actions = { 70 | load({ commit }, payload) { 71 | commit('DARK_LOAD', payload) 72 | commit('ASIDE_LOAD', payload) 73 | commit('ASIDEMIN_LOAD', payload) 74 | commit('MINASIDE_LOAD', payload) 75 | commit('TOPNAVFULL_LOAD', payload) 76 | commit('BOTNAVFIX_LOAD', payload) 77 | }, 78 | setDark({ commit }, payload) { 79 | commit('DARK_LOAD', payload) 80 | } 81 | } 82 | 83 | /* Export all stores */ 84 | export default { 85 | state, 86 | mutations, 87 | getters, 88 | actions 89 | } 90 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | const state = () => ({}) 2 | 3 | const getters = {} 4 | 5 | const mutations = {} 6 | 7 | const actions = { 8 | nuxtServerInit() {} 9 | } 10 | 11 | /* Export all stores */ 12 | export default { 13 | state, 14 | mutations, 15 | getters, 16 | actions 17 | } 18 | -------------------------------------------------------------------------------- /store/mock/index.js: -------------------------------------------------------------------------------- 1 | const LOAD_CHANNELS = 'LOAD_CHANNELS' 2 | const LOAD_PRODUCTS = 'LOAD_PRODUCTS' 3 | const LOAD_PROJECTS = 'LOAD_PROJECTS' 4 | const LOAD_FOODS = 'LOAD_FOODS' 5 | const LOAD_SALES = 'LOAD_SALES' 6 | const LOAD_USERS = 'LOAD_USERS' 7 | const LOAD_SUMMARY = 'LOAD_SUMMARY' 8 | const LOAD_BUILDINGS = 'LOAD_BUILDINGS' 9 | 10 | /* States */ 11 | const state = () => ({ 12 | channels: [], 13 | products: [], 14 | projects: [], 15 | foods: [], 16 | sales: [], 17 | users: [], 18 | summary: [], 19 | buildings: [] 20 | }) 21 | 22 | /* Getters */ 23 | const getters = { 24 | // getChannels(state) { 25 | // return state.channels 26 | // }, 27 | // getProducts(state) { 28 | // return state.products 29 | // }, 30 | // getProjects(state) { 31 | // return state.projects 32 | // }, 33 | // getFoods(state) { 34 | // return state.foods 35 | // }, 36 | // getSales(state) { 37 | // return state.sales 38 | // }, 39 | // getUsers(state) { 40 | // return state.users 41 | // } 42 | // geSummary(state) { 43 | // return state.summary 44 | // } 45 | } 46 | 47 | /* Mutations */ 48 | const mutations = { 49 | [LOAD_CHANNELS](state, payload) { 50 | state.channels = payload 51 | }, 52 | [LOAD_PRODUCTS](state, payload) { 53 | state.products = payload 54 | }, 55 | [LOAD_PROJECTS](state, payload) { 56 | state.projects = payload 57 | }, 58 | [LOAD_FOODS](state, payload) { 59 | state.foods = payload 60 | }, 61 | [LOAD_SALES](state, payload) { 62 | state.sales = payload 63 | }, 64 | [LOAD_USERS](state, payload) { 65 | state.users = payload 66 | }, 67 | [LOAD_SUMMARY](state, payload) { 68 | state.summary = payload 69 | }, 70 | [LOAD_BUILDINGS](state, payload) { 71 | state.buildings = payload 72 | } 73 | } 74 | 75 | const actions = { 76 | async actionGetChannels(context, payload) { 77 | const { commit } = context 78 | const { $axios } = this 79 | const result = await $axios 80 | .$get('json/channels.json', payload) 81 | .then((res) => res.data) 82 | commit('LOAD_CHANNELS', result) 83 | }, 84 | async actionGetUsers(context, payload) { 85 | const { commit } = context 86 | const { $axios } = this 87 | const result = await $axios 88 | .$get('json/users.json', payload) 89 | .then((res) => res.data) 90 | commit('LOAD_USERS', result) 91 | }, 92 | async actionGetSummary(context, payload) { 93 | const { commit } = context 94 | const { $axios } = this 95 | const result = await $axios 96 | .$get('json/summary.json', payload) 97 | .then((res) => res.data) 98 | commit('LOAD_SUMMARY', result) 99 | }, 100 | async actionGetBuildings(context, payload) { 101 | const { commit } = context 102 | const { $axios } = this 103 | const result = await $axios 104 | .$get('json/buildings.json', payload) 105 | .then((res) => res.data) 106 | commit('LOAD_BUILDINGS', result) 107 | }, 108 | async actionGetProducts(context, payload) { 109 | const { commit } = context 110 | const { $axios } = this 111 | const result = await $axios 112 | .$get('json/products.json', payload) 113 | .then((res) => res.data) 114 | commit('LOAD_PRODUCTS', result) 115 | }, 116 | async actionGetProjects(context, payload) { 117 | const { commit } = context 118 | const { $axios } = this 119 | const result = await $axios 120 | .$get('json/projects.json', payload) 121 | .then((res) => res.data) 122 | commit('LOAD_PROJECTS', result) 123 | }, 124 | async actionGetFoods(context, payload) { 125 | const { commit } = context 126 | const { $axios } = this 127 | const result = await $axios 128 | .$get('json/foods.json', payload) 129 | .then((res) => res.data) 130 | commit('LOAD_FOODS', result) 131 | } 132 | // actionGetSales({ commit }, payload) {}, 133 | } 134 | 135 | /* Export all stores */ 136 | export default { 137 | state, 138 | mutations, 139 | getters, 140 | actions 141 | } 142 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | customSyntax: 'postcss-html', 3 | extends: [ 4 | 'stylelint-config-standard', 5 | 'stylelint-config-recommended-vue', 6 | 'stylelint-config-prettier' 7 | ], 8 | // add your custom config here 9 | // https://stylelint.io/user-guide/configuration 10 | rules: { 11 | 'color-function-notation': 'legacy', 12 | 'alpha-value-notation': 'number' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /test/NuxtLogo.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import NuxtLogo from '@/components/NuxtLogo.vue' 3 | 4 | describe('NuxtLogo', () => { 5 | test('is a Vue instance', () => { 6 | const wrapper = mount(NuxtLogo) 7 | expect(wrapper.vm).toBeTruthy() 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "jsx": "preserve", 6 | "moduleResolution": "Node", 7 | "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], 8 | "esModuleInterop": true, 9 | "allowJs": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "noEmit": true, 13 | "experimentalDecorators": true, 14 | "baseUrl": ".", 15 | "paths": { 16 | "~/*": ["./*"], 17 | "@/*": ["./*"] 18 | }, 19 | "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node", "@nuxtjs/vuetify"] 20 | }, 21 | "vueCompilerOptions": { 22 | "experimentalDisableTemplateSupport": true 23 | }, 24 | "exclude": ["node_modules", ".nuxt", "dist"] 25 | } 26 | --------------------------------------------------------------------------------