├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .vscode
    └── settings.json
├── LICENSE.md
├── README.md
├── assets
    └── css
    │   └── tailwind.css
├── components
    ├── README.md
    ├── _demo
    │   ├── Graph1.vue
    │   ├── Graph2.vue
    │   ├── Graph3.vue
    │   ├── Graph4.vue
    │   ├── GraphCards.vue
    │   ├── MetricCards.vue
    │   └── Table.vue
    ├── charts
    │   ├── BarChart.vue
    │   ├── DoughnutChart.vue
    │   └── LineChart.vue
    ├── containers
    │   ├── BaseContainer.vue
    │   └── Box.vue
    └── widgets
    │   ├── Divider.vue
    │   └── MetricCard.vue
├── layouts
    ├── Footer.vue
    ├── Nav.vue
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── now.json
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    └── index.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    └── favicon.ico
├── store
    └── README.md
└── tailwind.config.js


/.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 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'plugin:nuxt/recommended',
13 |     'plugin:prettier/recommended',
14 |     'prettier',
15 |     'prettier/vue'
16 |   ],
17 |   plugins: [
18 |     'prettier'
19 |   ],
20 |   // add your custom rules here
21 |   rules: {
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/.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
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "eslint.validate": [
3 |     "javascript",
4 |     "javascriptreact",
5 |     { "language": "vue", "autoFix": true }
6 |   ],
7 |   "eslint.autoFixOnSave": true
8 | }


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Martin M.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-tailwind-admin
 2 | 
 3 | > Nuxt.js + Tailwind CSS Admin starter
 4 | 
 5 | ## Introduction
 6 | 
 7 | This is a Nuxt.js starter using [Admin Template Day](https://www.tailwindtoolbox.com/templates/admin-template-day) from [Tailwind Toolbox](https://www.tailwindtoolbox.com/).
 8 | 
 9 | ## Build Setup
10 | 
11 | ``` bash
12 | # install dependencies
13 | $ npm install
14 | 
15 | # serve with hot reload at localhost:3000
16 | $ npm run dev
17 | 
18 | # build for production and launch server
19 | $ npm run build
20 | $ npm start
21 | 
22 | # generate static project
23 | $ npm run generate
24 | ```
25 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This injects Tailwind's base styles, which is a combination of
 3 |  * Normalize.css and some additional base styles.
 4 |  *
 5 |  * You can see the styles here:
 6 |  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 7 |  *
 8 |  * If using `postcss-import`, use this import instead:
 9 |  *
10 |  * @import "tailwindcss/preflight";
11 |  */
12 | @tailwind base;
13 | 
14 | /**
15 |  * This injects any component classes registered by plugins.
16 |  *
17 |  * If using `postcss-import`, use this import instead:
18 |  *
19 |  * @import "tailwindcss/components";
20 |  */
21 | @tailwind components;
22 | 
23 | /**
24 |  * Here you would add any of your custom component classes; stuff that you'd
25 |  * want loaded *before* the utilities so that the utilities could still
26 |  * override them.
27 |  *
28 |  * Example:
29 |  *
30 |  * .btn { ... }
31 |  * .form-input { ... }
32 |  *
33 |  * Or if using a preprocessor or `postcss-import`:
34 |  *
35 |  * @import "components/buttons";
36 |  * @import "components/forms";
37 |  */
38 | 
39 | /**
40 |  * This injects all of Tailwind's utility classes, generated based on your
41 |  * config file.
42 |  *
43 |  * If using `postcss-import`, use this import instead:
44 |  *
45 |  * @import "tailwindcss/utilities";
46 |  */
47 | @tailwind utilities;
48 | 
49 | /**
50 |  * Here you would add any custom utilities you need that don't come out of the
51 |  * box with Tailwind.
52 |  *
53 |  * Example :
54 |  *
55 |  * .bg-pattern-graph-paper { ... }
56 |  * .skew-45 { ... }
57 |  *
58 |  * Or if using a preprocessor or `postcss-import`:
59 |  *
60 |  * @import "utilities/background-patterns";
61 |  * @import "utilities/skew-transforms";
62 |  */
63 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/_demo/Graph1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full md:w-1/2 p-3">
 3 |     <Box title="Graph">
 4 |       <BarChart :height="200" :options="options" :chartdata="chartdata" />
 5 |     </Box>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Box from '~/components/containers/Box.vue';
11 | import BarChart from '~/components/charts/BarChart.vue';
12 | 
13 | export default {
14 |   components: {
15 |     Box,
16 |     BarChart
17 |   },
18 |   data() {
19 |     return {
20 |       options: {
21 |         scales: {
22 |           yAxes: [
23 |             {
24 |               ticks: {
25 |                 beginAtZero: true
26 |               }
27 |             }
28 |           ]
29 |         }
30 |       },
31 |       chartdata: {
32 |         labels: ['January', 'February', 'March', 'April'],
33 |         datasets: [
34 |           {
35 |             label: 'Page Impressions',
36 |             data: [10, 20, 30, 40],
37 |             borderColor: 'rgb(255, 99, 132)',
38 |             backgroundColor: 'rgba(255, 99, 132, 0.2)'
39 |           },
40 |           {
41 |             label: 'Adsense Clicks',
42 |             data: [5, 15, 10, 30],
43 |             type: 'line',
44 |             fill: false,
45 |             borderColor: 'rgb(54, 162, 235)'
46 |           }
47 |         ]
48 |       }
49 |     };
50 |   }
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/components/_demo/Graph2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full md:w-1/2 p-3">
 3 |     <Box title="Graph">
 4 |       <LineChart :height="200" :options="options" :chartdata="chartdata" />
 5 |     </Box>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Box from '~/components/containers/Box.vue';
11 | import LineChart from '~/components/charts/LineChart.vue';
12 | 
13 | export default {
14 |   components: {
15 |     Box,
16 |     LineChart
17 |   },
18 |   data() {
19 |     return {
20 |       options: {},
21 |       chartdata: {
22 |         labels: [
23 |           'January',
24 |           'February',
25 |           'March',
26 |           'April',
27 |           'May',
28 |           'June',
29 |           'July'
30 |         ],
31 |         datasets: [
32 |           {
33 |             label: 'Views',
34 |             data: [65, 59, 80, 81, 56, 55, 40],
35 |             fill: false,
36 |             borderColor: 'rgb(75, 192, 192)',
37 |             lineTension: 0.1
38 |           }
39 |         ]
40 |       }
41 |     };
42 |   }
43 | };
44 | </script>
45 | 
46 | <style scoped></style>
47 | 


--------------------------------------------------------------------------------
/components/_demo/Graph3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full md:w-1/2 xl:w-1/3 p-3">
 3 |     <Box title="Graph">
 4 |       <BarChart :height="200" :options="options" :chartdata="chartdata" />
 5 |     </Box>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Box from '~/components/containers/Box.vue';
11 | import BarChart from '~/components/charts/BarChart.vue';
12 | 
13 | export default {
14 |   components: {
15 |     Box,
16 |     BarChart
17 |   },
18 |   data() {
19 |     return {
20 |       options: {
21 |         scales: {
22 |           yAxes: [
23 |             {
24 |               ticks: {
25 |                 beginAtZero: true
26 |               }
27 |             }
28 |           ]
29 |         }
30 |       },
31 |       chartdata: {
32 |         labels: [
33 |           'January',
34 |           'February',
35 |           'March',
36 |           'April',
37 |           'May',
38 |           'June',
39 |           'July'
40 |         ],
41 |         datasets: [
42 |           {
43 |             label: 'Likes',
44 |             data: [65, 59, 80, 81, 56, 55, 40],
45 |             fill: false,
46 |             backgroundColor: [
47 |               'rgba(255, 99, 132, 0.2)',
48 |               'rgba(255, 159, 64, 0.2)',
49 |               'rgba(255, 205, 86, 0.2)',
50 |               'rgba(75, 192, 192, 0.2)',
51 |               'rgba(54, 162, 235, 0.2)',
52 |               'rgba(153, 102, 255, 0.2)',
53 |               'rgba(201, 203, 207, 0.2)'
54 |             ],
55 |             borderColor: [
56 |               'rgb(255, 99, 132)',
57 |               'rgb(255, 159, 64)',
58 |               'rgb(255, 205, 86)',
59 |               'rgb(75, 192, 192)',
60 |               'rgb(54, 162, 235)',
61 |               'rgb(153, 102, 255)',
62 |               'rgb(201, 203, 207)'
63 |             ],
64 |             borderWidth: 1
65 |           }
66 |         ]
67 |       }
68 |     };
69 |   }
70 | };
71 | </script>
72 | 
73 | <style scoped></style>
74 | 


--------------------------------------------------------------------------------
/components/_demo/Graph4.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full md:w-1/2 xl:w-1/3 p-3">
 3 |     <Box title="Graph">
 4 |       <DoughnutChart :height="200" :options="options" :chartdata="chartdata" />
 5 |     </Box>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Box from '~/components/containers/Box.vue';
11 | import DoughnutChart from '~/components/charts/DoughnutChart.vue';
12 | 
13 | export default {
14 |   components: {
15 |     Box,
16 |     DoughnutChart
17 |   },
18 |   data() {
19 |     return {
20 |       options: {},
21 |       chartdata: {
22 |         labels: ['P1', 'P2', 'P3'],
23 |         datasets: [
24 |           {
25 |             label: 'Issues',
26 |             data: [300, 50, 100],
27 |             backgroundColor: [
28 |               'rgb(255, 99, 132)',
29 |               'rgb(54, 162, 235)',
30 |               'rgb(255, 205, 86)'
31 |             ]
32 |           }
33 |         ]
34 |       }
35 |     };
36 |   }
37 | };
38 | </script>
39 | 
40 | <style scoped></style>
41 | 


--------------------------------------------------------------------------------
/components/_demo/GraphCards.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-row flex-wrap flex-grow mt-2">
 3 |     <Graph1 />
 4 |     <Graph2 />
 5 |     <Graph3 />
 6 |     <Graph4 />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Graph1 from '~/components/_demo/Graph1.vue';
12 | import Graph2 from '~/components/_demo/Graph2.vue';
13 | import Graph3 from '~/components/_demo/Graph3.vue';
14 | import Graph4 from '~/components/_demo/Graph4.vue';
15 | 
16 | export default {
17 |   components: {
18 |     Graph1,
19 |     Graph2,
20 |     Graph3,
21 |     Graph4
22 |   }
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/components/_demo/MetricCards.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-wrap">
 3 |     <MetricCard
 4 |       icon="fa-wallet"
 5 |       icon-color="green-600"
 6 |       title="Total Revenue"
 7 |       value="$3249"
 8 |       arrow="up"
 9 |       arrow-color="green-500"
10 |     />
11 |     <MetricCard
12 |       icon="fa-users"
13 |       icon-color="orange-600"
14 |       title="Total Users"
15 |       value="249"
16 |       arrow="equal"
17 |       arrow-color="orange-500"
18 |     />
19 |     <MetricCard
20 |       icon="fa-user-plus"
21 |       icon-color="yellow-600"
22 |       title="New Users"
23 |       value="2"
24 |       arrow="up"
25 |       arrow-color="yellow-600"
26 |     />
27 | 
28 |     <MetricCard
29 |       icon="fa-server"
30 |       icon-color="blue-600"
31 |       title="Server Uptime"
32 |       value="152 days"
33 |     />
34 |     <MetricCard
35 |       icon="fa-tasks"
36 |       icon-color="indigo-600"
37 |       title="To Do List"
38 |       value="7 tasks"
39 |     />
40 |     <MetricCard
41 |       icon="fa-inbox"
42 |       icon-color="red-600"
43 |       title="Issues"
44 |       value="3"
45 |       arrow="up"
46 |       arrow-color="red-500"
47 |     />
48 |   </div>
49 | </template>
50 | 
51 | <script>
52 | import MetricCard from '~/components/widgets/MetricCard.vue';
53 | 
54 | export default {
55 |   components: {
56 |     MetricCard
57 |   }
58 | };
59 | </script>
60 | 
61 | <style scoped></style>
62 | 


--------------------------------------------------------------------------------
/components/_demo/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full p-3">
 3 |     <div class="bg-white border rounded shadow">
 4 |       <div class="border-b p-3">
 5 |         <h5 class="font-bold uppercase text-gray-600">Table</h5>
 6 |       </div>
 7 |       <div class="p-5">
 8 |         <table class="w-full p-5 text-gray-700">
 9 |           <thead>
10 |             <tr>
11 |               <th class="text-left text-blue-900">Name</th>
12 |               <th class="text-left text-blue-900">Side</th>
13 |               <th class="text-left text-blue-900">Role</th>
14 |             </tr>
15 |           </thead>
16 |           <tbody>
17 |             <tr>
18 |               <td>Obi Wan Kenobi</td>
19 |               <td>Light</td>
20 |               <td>Jedi</td>
21 |             </tr>
22 |             <tr>
23 |               <td>Greedo</td>
24 |               <td>South</td>
25 |               <td>Scumbag</td>
26 |             </tr>
27 |             <tr>
28 |               <td>Darth Vader</td>
29 |               <td>Dark</td>
30 |               <td>Sith</td>
31 |             </tr>
32 |           </tbody>
33 |         </table>
34 |         <p class="py-2"><a href="#">See More issues...</a></p>
35 |       </div>
36 |     </div>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/components/charts/BarChart.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Bar } from 'vue-chartjs';
 3 | 
 4 | export default {
 5 |   extends: Bar,
 6 |   props: {
 7 |     chartdata: {
 8 |       type: Object,
 9 |       default: null
10 |     },
11 |     options: {
12 |       type: Object,
13 |       default: null
14 |     }
15 |   },
16 |   mounted() {
17 |     this.renderChart(this.chartdata, this.options);
18 |   }
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/charts/DoughnutChart.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Doughnut } from 'vue-chartjs';
 3 | 
 4 | export default {
 5 |   extends: Doughnut,
 6 |   props: {
 7 |     chartdata: {
 8 |       type: Object,
 9 |       default: null
10 |     },
11 |     options: {
12 |       type: Object,
13 |       default: null
14 |     }
15 |   },
16 |   mounted() {
17 |     this.renderChart(this.chartdata, this.options);
18 |   }
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/charts/LineChart.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Line } from 'vue-chartjs';
 3 | 
 4 | export default {
 5 |   extends: Line,
 6 |   props: {
 7 |     chartdata: {
 8 |       type: Object,
 9 |       default: null
10 |     },
11 |     options: {
12 |       type: Object,
13 |       default: null
14 |     }
15 |   },
16 |   mounted() {
17 |     this.renderChart(this.chartdata, this.options);
18 |   }
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/containers/BaseContainer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="container w-full mx-auto pt-20">
3 |     <div class="w-full px-4 md:px-0 md:mt-8 mb-16 text-gray-800 leading-normal">
4 |       <slot></slot>
5 |     </div>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/components/containers/Box.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white border rounded shadow">
 3 |     <div class="border-b p-3">
 4 |       <h5 class="font-bold uppercase text-gray-600">{{ title }}</h5>
 5 |     </div>
 6 |     <div class="p-5">
 7 |       <slot></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: {
15 |     title: {
16 |       type: String,
17 |       default: 'Box Title'
18 |     }
19 |   }
20 | };
21 | </script>
22 | 
23 | <style scoped></style>
24 | 


--------------------------------------------------------------------------------
/components/widgets/Divider.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <hr class="border-b-2 border-gray-400 my-8 mx-4" />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/components/widgets/MetricCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full md:w-1/2 xl:w-1/3 p-3">
 3 |     <div class="bg-white border rounded shadow p-2">
 4 |       <div class="flex flex-row items-center">
 5 |         <div class="flex-shrink pr-4">
 6 |           <div :class="bgIconColor" class="rounded p-3">
 7 |             <i :class="icon" class="fa fa-2x fa-fw fa-inverse"></i>
 8 |           </div>
 9 |         </div>
10 |         <div class="flex-1 text-right md:text-center">
11 |           <h5 class="font-bold uppercase text-gray-500">{{ title }}</h5>
12 |           <h3 class="font-bold text-3xl">
13 |             {{ value }}
14 |             <span v-if="showArrow" :class="bgArrowColor"
15 |               ><i :class="arrowIcon" class="fas"></i
16 |             ></span>
17 |           </h3>
18 |         </div>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   props: {
27 |     icon: {
28 |       type: String,
29 |       required: true
30 |     },
31 |     iconColor: {
32 |       type: String,
33 |       default: 'gray-600'
34 |     },
35 |     title: {
36 |       type: String,
37 |       required: true
38 |     },
39 |     value: {
40 |       type: String,
41 |       default: ''
42 |     },
43 |     arrow: {
44 |       type: String,
45 |       default: ''
46 |     },
47 |     arrowColor: {
48 |       type: String,
49 |       default: 'gray-600'
50 |     }
51 |   },
52 | 
53 |   data() {
54 |     return {
55 |       arrows: {
56 |         up: 'fa-caret-up',
57 |         down: 'fa-caret-down',
58 |         equal: 'fa-exchange-alt'
59 |       }
60 |     };
61 |   },
62 |   computed: {
63 |     bgIconColor() {
64 |       return `bg-${this.iconColor}`;
65 |     },
66 |     showArrow() {
67 |       return this.arrowIcon;
68 |     },
69 |     arrowIcon() {
70 |       return this.arrows[this.arrow] || null;
71 |     },
72 |     bgArrowColor() {
73 |       return `text-${this.arrowColor}`;
74 |     }
75 |   }
76 | };
77 | </script>
78 | 


--------------------------------------------------------------------------------
/layouts/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="bg-white border-t border-gray-400 shadow">
 3 |     <div class="container max-w-md mx-auto flex py-8">
 4 |       <div class="w-full mx-auto flex flex-wrap">
 5 |         <div class="flex w-full md:w-1/2 ">
 6 |           <div class="px-8">
 7 |             <h3 class="font-bold font-bold text-gray-900">About</h3>
 8 |             <p class="py-4 text-gray-600 text-sm">
 9 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
10 |               vel mi ut felis tempus commodo nec id erat. Suspendisse
11 |               consectetur dapibus velit ut lacinia.
12 |             </p>
13 |           </div>
14 |         </div>
15 | 
16 |         <div class="flex w-full md:w-1/2">
17 |           <div class="px-8">
18 |             <h3 class="font-bold font-bold text-gray-900">Social</h3>
19 |             <ul class="list-reset items-center text-sm pt-3">
20 |               <li>
21 |                 <a
22 |                   class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
23 |                   href="#"
24 |                   >Add social link</a
25 |                 >
26 |               </li>
27 |               <li>
28 |                 <a
29 |                   class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
30 |                   href="#"
31 |                   >Add social link</a
32 |                 >
33 |               </li>
34 |               <li>
35 |                 <a
36 |                   class="inline-block text-gray-600 no-underline hover:text-gray-900 hover:text-underline py-1"
37 |                   href="#"
38 |                   >Add social link</a
39 |                 >
40 |               </li>
41 |             </ul>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </div>
46 |   </footer>
47 | </template>
48 | 
49 | <script>
50 | export default {};
51 | </script>
52 | 
53 | <style scoped></style>
54 | 


--------------------------------------------------------------------------------
/layouts/Nav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav id="header" class="bg-white fixed w-full z-10 top-0 shadow">
  3 |     <div
  4 |       class="w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0"
  5 |     >
  6 |       <div class="w-1/2 pl-2 md:pl-0">
  7 |         <a
  8 |           class="text-gray-900 text-base xl:text-xl no-underline hover:no-underline font-bold"
  9 |           href="#"
 10 |         >
 11 |           <i class="fas fa-sun text-orange-600 pr-3"></i> Admin Day Mode
 12 |         </a>
 13 |       </div>
 14 |       <div class="w-1/2 pr-0">
 15 |         <div class="flex relative inline-block float-right">
 16 |           <div class="relative text-sm">
 17 |             <button
 18 |               id="userButton"
 19 |               class="flex items-center focus:outline-none mr-3"
 20 |             >
 21 |               <img
 22 |                 class="w-8 h-8 rounded-full mr-4"
 23 |                 src="http://i.pravatar.cc/300"
 24 |                 alt="Avatar of User"
 25 |               />
 26 |               <span class="hidden md:inline-block">Hi, User </span>
 27 |               <svg
 28 |                 class="pl-2 h-2"
 29 |                 version="1.1"
 30 |                 xmlns="http://www.w3.org/2000/svg"
 31 |                 viewBox="0 0 129 129"
 32 |                 xmlns:xlink="http://www.w3.org/1999/xlink"
 33 |                 enable-background="new 0 0 129 129"
 34 |               >
 35 |                 <g>
 36 |                   <path
 37 |                     d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"
 38 |                   />
 39 |                 </g>
 40 |               </svg>
 41 |             </button>
 42 |             <div
 43 |               id="userMenu"
 44 |               class="bg-white rounded shadow-md mt-2 absolute mt-12 top-0 right-0 min-w-full overflow-auto z-30 invisible"
 45 |             >
 46 |               <ul class="list-reset">
 47 |                 <li>
 48 |                   <a
 49 |                     href="#"
 50 |                     class="px-4 py-2 block text-gray-900 hover:bg-gray-400 no-underline hover:no-underline"
 51 |                     >My account</a
 52 |                   >
 53 |                 </li>
 54 |                 <li>
 55 |                   <a
 56 |                     href="#"
 57 |                     class="px-4 py-2 block text-gray-900 hover:bg-gray-400 no-underline hover:no-underline"
 58 |                     >Notifications</a
 59 |                   >
 60 |                 </li>
 61 |                 <li><hr class="border-t mx-2 border-gray-400" /></li>
 62 |                 <li>
 63 |                   <a
 64 |                     href="#"
 65 |                     class="px-4 py-2 block text-gray-900 hover:bg-gray-400 no-underline hover:no-underline"
 66 |                     >Logout</a
 67 |                   >
 68 |                 </li>
 69 |               </ul>
 70 |             </div>
 71 |           </div>
 72 | 
 73 |           <div class="block lg:hidden pr-4">
 74 |             <button
 75 |               id="nav-toggle"
 76 |               class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-900 hover:border-teal-500 appearance-none focus:outline-none"
 77 |             >
 78 |               <svg
 79 |                 class="fill-current h-3 w-3"
 80 |                 viewBox="0 0 20 20"
 81 |                 xmlns="http://www.w3.org/2000/svg"
 82 |               >
 83 |                 <title>Menu</title>
 84 |                 <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
 85 |               </svg>
 86 |             </button>
 87 |           </div>
 88 |         </div>
 89 |       </div>
 90 | 
 91 |       <div
 92 |         id="nav-content"
 93 |         class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-white z-20"
 94 |       >
 95 |         <ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
 96 |           <li class="mr-6 my-2 md:my-0">
 97 |             <a
 98 |               href="#"
 99 |               class="block py-1 md:py-3 pl-1 align-middle text-orange-600 no-underline hover:text-gray-900 border-b-2 border-orange-600 hover:border-orange-600"
100 |             >
101 |               <i class="fas fa-home fa-fw mr-3 text-orange-600"></i
102 |               ><span class="pb-1 md:pb-0 text-sm">Home</span>
103 |             </a>
104 |           </li>
105 |           <li class="mr-6 my-2 md:my-0">
106 |             <a
107 |               href="#"
108 |               class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-pink-500"
109 |             >
110 |               <i class="fas fa-tasks fa-fw mr-3"></i
111 |               ><span class="pb-1 md:pb-0 text-sm">Tasks</span>
112 |             </a>
113 |           </li>
114 |           <li class="mr-6 my-2 md:my-0">
115 |             <a
116 |               href="#"
117 |               class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-purple-500"
118 |             >
119 |               <i class="fa fa-envelope fa-fw mr-3"></i
120 |               ><span class="pb-1 md:pb-0 text-sm">Messages</span>
121 |             </a>
122 |           </li>
123 |           <li class="mr-6 my-2 md:my-0">
124 |             <a
125 |               href="#"
126 |               class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-green-500"
127 |             >
128 |               <i class="fas fa-chart-area fa-fw mr-3"></i
129 |               ><span class="pb-1 md:pb-0 text-sm">Analytics</span>
130 |             </a>
131 |           </li>
132 |           <li class="mr-6 my-2 md:my-0">
133 |             <a
134 |               href="#"
135 |               class="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-red-500"
136 |             >
137 |               <i class="fa fa-wallet fa-fw mr-3"></i
138 |               ><span class="pb-1 md:pb-0 text-sm">Payments</span>
139 |             </a>
140 |           </li>
141 |         </ul>
142 | 
143 |         <div class="relative pull-right pl-4 pr-4 md:pr-0">
144 |           <input
145 |             type="search"
146 |             placeholder="Search"
147 |             class="w-full bg-gray-100 text-sm text-gray-800 transition border focus:outline-none focus:border-gray-700 rounded py-1 px-2 pl-10 appearance-none leading-normal"
148 |           />
149 |           <div
150 |             class="absolute search-icon"
151 |             style="top: 0.375rem;left: 1.75rem;"
152 |           >
153 |             <svg
154 |               class="fill-current pointer-events-none text-gray-800 w-4 h-4"
155 |               xmlns="http://www.w3.org/2000/svg"
156 |               viewBox="0 0 20 20"
157 |             >
158 |               <path
159 |                 d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"
160 |               ></path>
161 |             </svg>
162 |           </div>
163 |         </div>
164 |       </div>
165 |     </div>
166 |   </nav>
167 | </template>
168 | 
169 | <script>
170 | export default {
171 |   mounted() {
172 |     const userMenuDiv = document.getElementById('userMenu');
173 |     const userMenu = document.getElementById('userButton');
174 | 
175 |     const navMenuDiv = document.getElementById('nav-content');
176 |     const navMenu = document.getElementById('nav-toggle');
177 | 
178 |     document.onclick = check;
179 | 
180 |     function check(e) {
181 |       const target = (e && e.target) || (event && event.srcElement);
182 | 
183 |       // User Menu
184 |       if (!checkParent(target, userMenuDiv)) {
185 |         // click NOT on the menu
186 |         if (checkParent(target, userMenu)) {
187 |           // click on the link
188 |           if (userMenuDiv.classList.contains('invisible')) {
189 |             userMenuDiv.classList.remove('invisible');
190 |           } else {
191 |             userMenuDiv.classList.add('invisible');
192 |           }
193 |         } else {
194 |           // click both outside link and outside menu, hide menu
195 |           userMenuDiv.classList.add('invisible');
196 |         }
197 |       }
198 | 
199 |       // Nav Menu
200 |       if (!checkParent(target, navMenuDiv)) {
201 |         // click NOT on the menu
202 |         if (checkParent(target, navMenu)) {
203 |           // click on the link
204 |           if (navMenuDiv.classList.contains('hidden')) {
205 |             navMenuDiv.classList.remove('hidden');
206 |           } else {
207 |             navMenuDiv.classList.add('hidden');
208 |           }
209 |         } else {
210 |           // click both outside link and outside menu, hide menu
211 |           navMenuDiv.classList.add('hidden');
212 |         }
213 |       }
214 |     }
215 | 
216 |     function checkParent(t, elm) {
217 |       while (t.parentNode) {
218 |         if (t === elm) {
219 |           return true;
220 |         }
221 |         t = t.parentNode;
222 |       }
223 |       return false;
224 |     }
225 |   }
226 | };
227 | </script>
228 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Nav />
 4 |     <nuxt />
 5 |     <Footer />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Nav from '~/layouts/Nav.vue';
11 | import Footer from '~/layouts/Footer.vue';
12 | 
13 | export default {
14 |   components: {
15 |     Nav,
16 |     Footer
17 |   },
18 |   head: {
19 |     title: 'Nuxt.js Admin Starter',
20 |     bodyAttrs: {
21 |       class: 'bg-gray-100 font-sans leading-normal tracking-normal'
22 |     }
23 |   }
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "name": "nuxt-starters",
 4 |   "builds": [
 5 |     {
 6 |       "src": "package.json",
 7 |       "use": "@now/static-build"
 8 |     }
 9 |   ],
10 |   "alias": [
11 |     "nuxt-tailwind-admin.now.sh"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import pkg from './package';
 3 | 
 4 | export default {
 5 |   mode: 'universal',
 6 | 
 7 |   /*
 8 |    ** Headers of the page
 9 |    */
10 |   head: {
11 |     title: pkg.name,
12 |     meta: [
13 |       { charset: 'utf-8' },
14 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
15 |       { hid: 'description', name: 'description', content: pkg.description }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
19 |       {
20 |         rel: 'stylesheet',
21 |         href: 'https://use.fontawesome.com/releases/v5.3.1/css/all.css',
22 |         integrity:
23 |           'sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU',
24 |         crossorigin: 'anonymous'
25 |       }
26 |     ]
27 |   },
28 | 
29 |   /*
30 |    ** Customize the progress-bar color
31 |    */
32 |   loading: { color: '#fff' },
33 | 
34 |   /*
35 |    ** Global CSS
36 |    */
37 |   css: ['~/assets/css/tailwind.css'],
38 | 
39 |   /*
40 |    ** Plugins to load before mounting the App
41 |    */
42 |   plugins: [],
43 | 
44 |   /*
45 |    ** Nuxt.js modules
46 |    */
47 |   modules: [],
48 | 
49 |   /*
50 |    ** Build configuration
51 |    */
52 |   build: {
53 |     postcss: {
54 |       plugins: {
55 |         tailwindcss: path.resolve(__dirname, './tailwind.config.js')
56 |       }
57 |     },
58 |     extend(config, ctx) {
59 |       // Run ESLint on save
60 |       if (ctx.isDev && ctx.isClient) {
61 |         config.module.rules.push({
62 |           enforce: 'pre',
63 |           test: /\.(js|vue)$/,
64 |           loader: 'eslint-loader',
65 |           exclude: /(node_modules)/
66 |         });
67 |       }
68 |     }
69 |   }
70 | };
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-tailwind-admin",
 3 |   "version": "1.1.0",
 4 |   "description": "Nuxt.js + Tailwind CSS Admin starter",
 5 |   "author": "Martín M.",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "now-build": "nuxt generate",
13 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
14 |     "precommit": "npm run lint"
15 |   },
16 |   "dependencies": {
17 |     "chart.js": "^2.8.0",
18 |     "cross-env": "^5.2.0",
19 |     "nuxt": "^2.8.1",
20 |     "vue-chartjs": "^3.4.2"
21 |   },
22 |   "devDependencies": {
23 |     "@nuxtjs/eslint-config": "^0.0.1",
24 |     "autoprefixer": "^9.6.0",
25 |     "babel-eslint": "^10.0.2",
26 |     "eslint": "^5.16.0",
27 |     "eslint-config-prettier": "^5.0.0",
28 |     "eslint-config-standard": ">=12.0.0",
29 |     "eslint-loader": "^2.1.2",
30 |     "eslint-plugin-import": ">=2.17.3",
31 |     "eslint-plugin-jest": ">=22.6.4",
32 |     "eslint-plugin-node": ">=9.1.0",
33 |     "eslint-plugin-nuxt": ">=0.4.3",
34 |     "eslint-plugin-prettier": "^3.1.0",
35 |     "eslint-plugin-promise": ">=4.1.1",
36 |     "eslint-plugin-standard": ">=4.0.0",
37 |     "eslint-plugin-vue": "^5.2.2",
38 |     "nodemon": "^1.19.1",
39 |     "prettier": "^1.18.2",
40 |     "tailwindcss": "^1.0.4"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <BaseContainer>
 3 |     <MetricCards />
 4 |     <Divider />
 5 |     <GraphCards />
 6 |     <Table />
 7 |   </BaseContainer>
 8 | </template>
 9 | 
10 | <script>
11 | import Divider from '~/components/widgets/Divider.vue';
12 | import BaseContainer from '~/components/containers/BaseContainer.vue';
13 | import MetricCards from '~/components/_demo/MetricCards.vue';
14 | import GraphCards from '~/components/_demo/GraphCards.vue';
15 | import Table from '~/components/_demo/Table.vue';
16 | 
17 | export default {
18 |   components: {
19 |     Divider,
20 |     BaseContainer,
21 |     MetricCards,
22 |     GraphCards,
23 |     Table
24 |   }
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skydiver/nuxt-tailwind-admin/a3060362e82df16e9768a544a7570c964911e7a6/static/favicon.ico


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   prefix: '',
3 |   important: false,
4 |   separator: ':',
5 |   theme: {},
6 |   variants: {},
7 |   plugins: []
8 | };
9 | 


--------------------------------------------------------------------------------