├── .github └── workflows │ └── main.yml ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── babel.config.js ├── genezio.yaml ├── gulpfile.js ├── package.json ├── public ├── apple-icon.png ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── img │ │ ├── angular.jpg │ │ ├── bootstrap.jpg │ │ ├── component-btn-pink.png │ │ ├── component-btn.png │ │ ├── component-info-2.png │ │ ├── component-info-card.png │ │ ├── component-menu.png │ │ ├── component-profile-card.png │ │ ├── documentation.png │ │ ├── github.svg │ │ ├── google.svg │ │ ├── ill_header.png │ │ ├── landing.jpg │ │ ├── login.jpg │ │ ├── pattern_vue.png │ │ ├── profile.jpg │ │ ├── react.jpg │ │ ├── register_bg_2.png │ │ ├── sketch.jpg │ │ ├── team-1-800x800.jpg │ │ ├── team-1-800x8000.jpg │ │ ├── team-2-800x800.jpg │ │ ├── team-3-800x800.jpg │ │ ├── team-4-470x470.png │ │ └── vue.jpg │ └── styles │ │ ├── index.css │ │ └── tailwind.css ├── components │ ├── Cards │ │ ├── CardBarChart.vue │ │ ├── CardLineChart.vue │ │ ├── CardPageVisits.vue │ │ ├── CardProfile.vue │ │ ├── CardSettings.vue │ │ ├── CardSocialTraffic.vue │ │ ├── CardStats.vue │ │ └── CardTable.vue │ ├── Dropdowns │ │ ├── IndexDropdown.vue │ │ ├── NotificationDropdown.vue │ │ ├── PagesDropdown.vue │ │ ├── TableDropdown.vue │ │ └── UserDropdown.vue │ ├── Footers │ │ ├── Footer.vue │ │ ├── FooterAdmin.vue │ │ └── FooterSmall.vue │ ├── Headers │ │ └── HeaderStats.vue │ ├── Maps │ │ └── MapExample.vue │ ├── Navbars │ │ ├── AdminNavbar.vue │ │ ├── AuthNavbar.vue │ │ └── IndexNavbar.vue │ └── Sidebar │ │ └── Sidebar.vue ├── layouts │ ├── Admin.vue │ └── Auth.vue ├── main.js └── views │ ├── Index.vue │ ├── Landing.vue │ ├── Profile.vue │ ├── admin │ ├── Dashboard.vue │ ├── Maps.vue │ ├── Settings.vue │ └── Tables.vue │ └── auth │ ├── Login.vue │ └── Register.vue ├── tailwind.config.js └── vue.config.js /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-notus?ref=vn-new-issue\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | commit.sh 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.1.0] 2021-03-19 4 | ### Bug fixing 5 | - Rename `master` branch to `main` 6 | - To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`): https://tailwindcss.com/docs/upgrading-to-v2 7 | - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-blueGray-{number}` 8 | - After that, we've changed `{type}-blueGray-{number}` to `{type}-blueGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`) 9 | - You can achieve this, by search in your whole project for `blueGray-100` and replace it with `blueGray-50` 10 | - Then, you search in your whole project for `blueGray-200` and replace it with `blueGray-100` 11 | - Then, you search in your whole project for `blueGray-300` and replace it with `blueGray-200` 12 | - Then, you search in your whole project for `blueGray-400` and replace it with `blueGray-300` 13 | - Then, you search in your whole project for `blueGray-500` and replace it with `blueGray-400` 14 | - Then, you search in your whole project for `blueGray-600` and replace it with `blueGray-500` 15 | - Then, you search in your whole project for `blueGray-700` and replace it with `blueGray-600` 16 | - Then, you search in your whole project for `blueGray-800` and replace it with `blueGray-700` 17 | - Then, you search in your whole project for `blueGray-900` and replace it with `blueGray-800` 18 | - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-lightBlue-{number}` 19 | - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-green-{number}` classes were renamed to `{type}-emerald-{number}` 20 | - `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0` 21 | - https://github.com/creativetimofficial/notus-angular/issues/4 22 | - https://github.com/creativetimofficial/notus-js/issues/4 23 | - https://github.com/creativetimofficial/notus-js/pull/5 24 | - https://github.com/creativetimofficial/notus-js/pull/6 25 | - https://github.com/creativetimofficial/notus-nextjs/issues/6 26 | - https://github.com/creativetimofficial/notus-nextjs/issues/7 27 | - https://github.com/creativetimofficial/notus-nextjs/issues/8 28 | - https://github.com/creativetimofficial/notus-react/issues/3 29 | - https://github.com/creativetimofficial/notus-svelte/issues/3 30 | - https://github.com/creativetimofficial/notus-svelte/issues/6 31 | - https://github.com/creativetimofficial/vue-notus/pull/4/ 32 | ### Major style changes 33 | - The upgrade of Tailwind CSS from version 1 to version 2, will cause multiple style changes, check them out on the official Tailwind CSS websites: 34 | - https://blog.tailwindcss.com/tailwindcss-v2 35 | - https://tailwindcss.com/ 36 | - https://tailwindcss.com/docs/upgrading-to-v2 37 | ### Deleted components 38 | ### Added components 39 | ### Deleted dependencies 40 | - `@tailwindcss/custom-forms` 41 | - `babel-eslint` (updated to `@babel/eslint-parser` and `@babel/core`) 42 | ### Added dependencies 43 | - `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`) 44 | - `autoprefixer` 45 | - `postcss` 46 | - `@babel/core` (instead of `babel-eslint`) 47 | - `@babel/eslint-parser` (instead of `babel-eslint`) 48 | - `@vue/compiler-sfc` 49 | ### Updated dependencies 50 | ``` 51 | @fortawesome/fontawesome-free 5.14.0 → 5.15.3 52 | @popperjs/core 2.5.1 → 2.9.1 53 | chart.js 2.9.3 → 2.9.4 54 | core-js 3.6.5 → 3.9.1 55 | tailwindcss 1.8.10 → 2.0.4 56 | vue 2.6.12 → 3.0.7 57 | vue-router 3.4.3 → 4.0.5 58 | @vue/cli-plugin-babel 4.5.6 → 5.0.0-alpha.7 59 | @vue/cli-plugin-eslint 4.5.6 → 5.0.0-alpha.7 60 | @vue/cli-service 4.5.6 → 5.0.0-alpha.7 61 | eslint 6.8.0 → 7.22.0 62 | eslint-plugin-vue 6.2.2 → 7.7.0 63 | ``` 64 | ### Warning 65 | _On a clean install there may be some warnings from request, chokidar, fsevents - they come from node_modules, and they do not affect the product at all._ 66 | _The following warning will show when doing a clean install `npm WARN cache-loader@4.1.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.`, however it does not affect in any way the product._ 67 | 68 | ## [1.0.0] 2020-09-29 69 | ### Original Release 70 | - Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=vn-changelog) 71 | - Added design from Tailwind Starter Kit by Creative Tim 72 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Creative Tim (https://www.creative-tim.com?ref=vn-license) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Notus ![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter) 2 | 3 | ![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-notus.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-notus.svg) ![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg) ![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg) 4 | 5 | ![Vue Notus](https://github.com/creativetimofficial/public-assets/blob/master/vue-notus/vue-notus.jpg?raw=true) 6 | 7 | ### A beautiful UI Kit and Admin for Tailwind CSS and VueJS. 8 | 9 | Start your development with a Free Tailwind CSS and VueJS UI Kit and Admin. Let Vue Notus amaze you with its cool features and build tools and get your project to a whole new level. 10 | 11 | Vue Notus is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS. 12 | 13 | It is based on [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=vn-github-readme) by Creative Tim, and it is build with both presentation pages, and pages for an admin dashboard. 14 | 15 | Speed up your web development with a beautiful product made by Creative Tim . 16 | If you like bright and fresh colors, you will love this Free Tailwind CSS Template! It features a huge number of components that can help you create amazing websites. 17 | 18 | ### Get Started 19 | 20 | - Install NodeJS **LTS** version from NodeJs Official Page 21 | - Download the product on this page 22 | - Unzip the downloaded file to a folder in your computer 23 | - Open Terminal 24 | - Go to your file project (where you’ve unzipped the product) 25 | - (If you are on a linux based terminal) Simply run `npm run install:clean` 26 | - (If not) Run in terminal `npm install` 27 | - (If not) Run in terminal `npm run build:tailwind` (each time you add a new class, a class that does not exist in `src/assets/styles/tailwind.css`, you will need to run this command) 28 | - (If not) Run in terminal `npm run serve` 29 | - Navigate to https://localhost:8080 30 | - Check more about [Tailwind CSS](https://tailwindcss.com/?ref=creativetim) 31 | 32 | ### Pages 33 | 34 | If you want to get inspiration or just show something directly to your clients, 35 | you can jump start your development with our pre-built example pages. You will be able 36 | to quickly set up the basic structure for your web project. 37 | 38 | Here are all the page from the project: 39 | - [Presentation](https://demos.creative-tim.com/vue-notus/?ref=vn-github-readme) 40 | - Admin Samples 41 | - [Dashboard](https://demos.creative-tim.com/vue-notus/admin/dashboard?ref=vn-github-readme) 42 | - [Settings](https://demos.creative-tim.com/vue-notus/admin/settings?ref=vn-github-readme) 43 | - [Tables](https://demos.creative-tim.com/vue-notus/admin/tables?ref=vn-github-readme) 44 | - [Maps](https://demos.creative-tim.com/vue-notus/admin/maps?ref=vn-github-readme) 45 | - Authentication Samples 46 | - [Login](https://demos.creative-tim.com/vue-notus/auth/login?ref=vn-github-readme) 47 | - [Register](https://demos.creative-tim.com/vue-notus/auth/register?ref=vn-github-readme) 48 | - Presentation Samples 49 | - [Landing](https://demos.creative-tim.com/vue-notus/landing?ref=vn-github-readme) 50 | - [Profile](https://demos.creative-tim.com/vue-notus/profile?ref=vn-github-readme) 51 | 52 | 53 | ### Fully Coded Components 54 | 55 | Vue Notus is built with over frontend 120 components, giving you the freedom of choosing and combining. All components can take variations in colors, that you can easily modify using Tailwind CSS classes (NOTE: each time you add a new class, a class that does not exist in `src/assets/styles/tailwind.css`, you will need to compile again tailwind). 56 | 57 | You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. 58 | This Free Tailwind CSS Template is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. 59 | 60 | Every element has multiple states for colors, styles, hover, focus, that you can easily access and use. 61 | 62 | 63 | ### CSS Components 64 | 65 | Vue Notus comes with 120 Fully Coded CSS elements, such as [Alerts](https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vn-github-readme), [Buttons](https://www.creative-tim.com/learning-lab/tailwind/buttons/notus-vuejs?ref=vn-github-readme), [Inputs](https://www.creative-tim.com/learning-lab/tailwind/inputs/notus-vuejs?ref=vn-github-readme) and many more. 66 | 67 | Please [check all of them here](https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vn-github-readme). 68 | 69 | ### VueJS Components 70 | 71 | We also feature the following 18 dynamic components: 72 | - [Alerts](https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?tws=vtw-github-readme) 73 | - [Popper for Menus](https://www.creative-tim.com/learning-lab/tailwind/vue/dropdowns/notus?tws=vtw-github-readme) 74 | - [Menus](https://www.creative-tim.com/learning-lab/tailwind/vue/menus/notus?ref=vn-github-readme) 75 | - [Modals](https://www.creative-tim.com/learning-lab/tailwind/vue/modals/notus?ref=vn-github-readme) 76 | - [Navbars](https://www.creative-tim.com/learning-lab/tailwind/vue/navbar/notus?ref=vn-github-readme) 77 | - [Popper for popover content](https://www.creative-tim.com/learning-lab/tailwind/vue/popovers/notus?ref=vn-github-readme) 78 | - [Tabs](https://www.creative-tim.com/learning-lab/tailwind/vue/tabs/notus?ref=vn-github-readme) 79 | - [Popper for tooltips content](https://www.creative-tim.com/learning-lab/tailwind/vue/tooltips/notus?ref=vn-github-readme) 80 | 81 | 82 | ## Table of Contents 83 | 84 | * [Versions](#versions) 85 | * [Documentation](#documentation) 86 | * [Quick Start](#quick-start) 87 | * [Deploy](#deploy) 88 | * [Files and folders](#files-and-folders) 89 | * [Browser Support](#browser-support) 90 | * [Reporting Issues](#reporting-issues) 91 | * [Licensing](#licensing) 92 | * [Useful Links](#useful-links) 93 | * [Resources](#resources) 94 | 95 | ## Versions 96 | 97 | [](https://www.creative-tim.com/product/notus-angular?ref=vn-github-readme)[](https://www.creative-tim.com/product/notus-js?ref=vn-github-readme)[](https://www.creative-tim.com/product/notus-nextjs?ref=vn-github-readme)[](https://www.creative-tim.com/product/notus-react?ref=vn-github-readme)[](https://www.creative-tim.com/product/notus-svelte?ref=vn-github-readme)[](https://www.creative-tim.com/product/vue-notus?ref=vn-github-readme) 98 | 99 | 100 | | Angular | JavaScript / HTML | NextJS | React | Svelte | VueJS | 101 | | :---: | :---: | :---: | :---: | :---: | :---: | 102 | | [![Notus Angular](https://github.com/creativetimofficial/public-assets/blob/master/notus-angular/notus-angular.jpg?raw=true)](https://www.creative-tim.com/product/notus-angular?ref=vn-github-readme) | [![Notus JS](https://github.com/creativetimofficial/public-assets/blob/master/notus-js/notus-js.jpg?raw=true)](https://www.creative-tim.com/product/notus-js?ref=vn-github-readme) | [![Notus NextJS](https://github.com/creativetimofficial/public-assets/blob/master/notus-nextjs/notus-nextjs.jpg?raw=true)](https://www.creative-tim.com/product/notus-nextjs?ref=vn-github-readme) | [![Notus React](https://github.com/creativetimofficial/public-assets/blob/master/notus-react/notus-react.jpg?raw=true)](https://www.creative-tim.com/product/notus-react?ref=vn-github-readme) | [![Notus Svelte](https://github.com/creativetimofficial/public-assets/blob/master/notus-svelte/notus-svelte.jpg?raw=true)](https://www.creative-tim.com/product/notus-svelte?ref=vn-github-readme) | [![Vue Notus](https://github.com/creativetimofficial/public-assets/blob/master/vue-notus/vue-notus.jpg?raw=true)](https://www.creative-tim.com/product/vue-notus?ref=vn-github-readme) 103 | 104 | ## Documentation 105 | The documentation for the Vue Notus is hosted at our website. 106 | 107 | ## Quick start 108 | 109 | - Download from Creative Tim. 110 | - Check it on Github. 111 | 112 | ## Deploy 113 | 114 | :rocket: You can deploy your own version of the template to Genezio with one click: 115 | 116 | [![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/vue-notus&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head) 117 | 118 | ## Files and Folder 119 | 120 | This is the project structure that you will get upon the download: 121 | ``` 122 | vue-notus 123 | . 124 | ├── CHANGELOG.md 125 | ├── ISSUE_TEMPLATE.md 126 | ├── LICENSE.md 127 | ├── README.md 128 | ├── babel.config.js 129 | ├── package.json 130 | ├── public 131 | │   ├── favicon.ico 132 | │   └── index.html 133 | ├── src 134 | │   ├── App.vue 135 | │   ├── assets 136 | │   │   ├── img 137 | │   │   │   ├── github.svg 138 | │   │   │   └── google.svg 139 | │   │   └── styles 140 | │   │   ├── index.css 141 | │   │   └── tailwind.css 142 | │   ├── components 143 | │   │   ├── Cards 144 | │   │   │   ├── CardBarChart.vue 145 | │   │   │   ├── CardLineChart.vue 146 | │   │   │   ├── CardPageVisits.vue 147 | │   │   │   ├── CardProfile.vue 148 | │   │   │   ├── CardSettings.vue 149 | │   │   │   ├── CardSocialTraffic.vue 150 | │   │   │   ├── CardStats.vue 151 | │   │   │   └── CardTable.vue 152 | │   │   ├── Dropdowns 153 | │   │   │   ├── IndexDropdown.vue 154 | │   │   │   ├── NotificationDropdown.vue 155 | │   │   │   ├── PagesDropdown.vue 156 | │   │   │   ├── TableDropdown.vue 157 | │   │   │   └── UserDropdown.vue 158 | │   │   ├── Footers 159 | │   │   │   ├── Footer.vue 160 | │   │   │   ├── FooterAdmin.vue 161 | │   │   │   └── FooterSmall.vue 162 | │   │   ├── Headers 163 | │   │   │   └── HeaderStats.vue 164 | │   │   ├── Maps 165 | │   │   │   └── MapExample.vue 166 | │   │   ├── Navbars 167 | │   │   │   ├── AdminNavbar.vue 168 | │   │   │   ├── AuthNavbar.vue 169 | │   │   │   └── IndexNavbar.vue 170 | │   │   └── Sidebar 171 | │   │   └── Sidebar.vue 172 | │   ├── layouts 173 | │   │   ├── Admin.vue 174 | │   │   └── Auth.vue 175 | │   ├── main.js 176 | │   └── views 177 | │   ├── Index.vue 178 | │   ├── Landing.vue 179 | │   ├── Profile.vue 180 | │   ├── admin 181 | │   │   ├── Dashboard.vue 182 | │   │   ├── Maps.vue 183 | │   │   ├── Settings.vue 184 | │   │   └── Tables.vue 185 | │   └── auth 186 | │   ├── Login.vue 187 | │   └── Register.vue 188 | ├── tailwind.config.js 189 | └── vue.config.js 190 | ``` 191 | 192 | ## Browser Support 193 | 194 | At present, we officially aim to support the last two versions of the following browsers: 195 | 196 | | Chrome | Firefox | Edge | Safari | Opera | 197 | |:---:|:---:|:---:|:---:|:---:| 198 | | | | | | | 199 | 200 | ## Reporting Issues 201 | 202 | We use GitHub Issues as the official bug tracker for the Vue Notus. Here are some advices for our users that want to report an issue: 203 | 204 | 1. Make sure that you are using the latest version of the Vue Notus. Check the CHANGELOG from your dashboard on our website. 205 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 206 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 207 | 208 | ## Licensing 209 | 210 | - Copyright 2021 Creative Tim 211 | 212 | - Licensed under MIT 213 | 214 | ## Useful Links 215 | 216 | - Tutorials 217 | - Affiliate Program (earn money) 218 | - Blog Creative Tim 219 | - Free Products from Creative Tim 220 | - Premium Products from Creative Tim 221 | - React Products from Creative Tim 222 | - Angular Products from Creative Tim 223 | - VueJS Products from Creative Tim 224 | - More products from Creative Tim 225 | - Check our Bundles here 226 | - Check our awesome builder here 227 | - Check Tailwind Starter Kit, the project behind this product here 228 | 229 | ### Social Media 230 | 231 | Twitter: https://twitter.com/CreativeTim 232 | 233 | Facebook: https://www.facebook.com/CreativeTim 234 | 235 | Dribbble: https://dribbble.com/creativetim 236 | 237 | Instagram: https://www.instagram.com/creativetimofficial/ 238 | 239 | 240 | ## Resources 241 | - Demo: https://demos.creative-tim.com/vue-notus/?ref=vn-readme 242 | - Download Page: https://www.creative-tim.com/product/vue-notus 243 | - Documentation: https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus 244 | - License Agreement: https://www.creative-tim.com/license?ref=vn-readme 245 | - Support: https://www.creative-tim.com/contact-us?ref=vn-readme 246 | - Issues: Github Issues Page 247 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: vue-notus 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: dist 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const gap = require("gulp-append-prepend"); 3 | 4 | gulp.task("licenses", async function () { 5 | // this is to add Creative Tim licenses in the production mode for the minified js 6 | gulp 7 | .src("dist/js/*.js", { base: "./" }) 8 | .pipe( 9 | gap.prependText(`/*! 10 | 11 | ========================================================= 12 | * Vue Notus - v1.1.0 based on Tailwind Starter Kit by Creative Tim 13 | ========================================================= 14 | 15 | * Product Page: https://www.creative-tim.com/product/vue-notus 16 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 17 | * Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md) 18 | 19 | * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation 20 | 21 | * Coded by Creative Tim 22 | 23 | ========================================================= 24 | 25 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 26 | 27 | */`) 28 | ) 29 | .pipe(gulp.dest("./", { overwrite: true })); 30 | 31 | // this is to add Creative Tim licenses in the production mode for the minified html 32 | gulp 33 | .src("dist/index.html", { base: "./" }) 34 | .pipe( 35 | gap.prependText(``) 54 | ) 55 | .pipe(gulp.dest("./", { overwrite: true })); 56 | 57 | // this is to add Creative Tim licenses in the production mode for the minified css 58 | gulp 59 | .src("dist/css/*.css", { base: "./" }) 60 | .pipe( 61 | gap.prependText(`/*! 62 | 63 | ========================================================= 64 | * Vue Notus - v1.1.0 based on Tailwind Starter Kit by Creative Tim 65 | ========================================================= 66 | 67 | * Product Page: https://www.creative-tim.com/product/vue-notus 68 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 69 | * Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md) 70 | 71 | * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation 72 | 73 | * Coded by Creative Tim 74 | 75 | ========================================================= 76 | 77 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 78 | 79 | */`) 80 | ) 81 | .pipe(gulp.dest("./", { overwrite: true })); 82 | return; 83 | }); 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-notus", 3 | "homepage": "https://demos.creative-tim.com/vue-notus/", 4 | "version": "1.1.0", 5 | "description": "Vue Notus - A free Tailwind CSS and VueJS UI Kit and Admin by Creative Tim.", 6 | "repository": "https://github.com/creativetimofficial/vue-notus", 7 | "license": "MIT", 8 | "scripts": { 9 | "serve": "vue-cli-service serve", 10 | "build": "cross-env PUBLIC_URL=/ cross-env CI=false vue-cli-service build && gulp licenses", 11 | "lint": "vue-cli-service lint", 12 | "build:tailwind": "tailwind build src/assets/styles/index.css -o src/assets/styles/tailwind.css", 13 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm run serve" 14 | }, 15 | "dependencies": { 16 | "@fortawesome/fontawesome-free": "^6.6.0", 17 | "@popperjs/core": "2.9.1", 18 | "@tailwindcss/forms": "0.2.1", 19 | "@vue/compiler-sfc": "3.0.7", 20 | "chart.js": "2.9.4", 21 | "core-js": "3.9.1", 22 | "gulp": "4.0.2", 23 | "gulp-append-prepend": "1.0.8", 24 | "tailwindcss": "2.0.4", 25 | "vue": "3.0.7", 26 | "vue-router": "4.0.5" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "7.13.10", 30 | "@babel/eslint-parser": "7.13.10", 31 | "@vue/cli-plugin-babel": "5.0.0-alpha.7", 32 | "@vue/cli-plugin-eslint": "5.0.0-alpha.7", 33 | "@vue/cli-service": "5.0.0-alpha.7", 34 | "autoprefixer": "10.2.5", 35 | "eslint": "7.22.0", 36 | "eslint-plugin-vue": "7.7.0", 37 | "postcss": "8.4.39", 38 | "vue-template-compiler": "2.6.12", 39 | "cross-env": "^7.0.3" 40 | }, 41 | "eslintConfig": { 42 | "root": true, 43 | "env": { 44 | "node": true 45 | }, 46 | "extends": [ 47 | "plugin:vue/essential", 48 | "eslint:recommended" 49 | ], 50 | "rules": {}, 51 | "parserOptions": { 52 | "parser": "@babel/eslint-parser" 53 | } 54 | }, 55 | "postcss": { 56 | "plugins": { 57 | "autoprefixer": {} 58 | } 59 | }, 60 | "browserslist": [ 61 | "> 1%", 62 | "last 2 versions" 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | Vue Notus by Creative Tim | Free and Open Source UI Kit 33 | 34 | 35 | 36 | 42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/assets/img/angular.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/angular.jpg -------------------------------------------------------------------------------- /src/assets/img/bootstrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/bootstrap.jpg -------------------------------------------------------------------------------- /src/assets/img/component-btn-pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/component-btn-pink.png -------------------------------------------------------------------------------- /src/assets/img/component-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/component-btn.png -------------------------------------------------------------------------------- /src/assets/img/component-info-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/component-info-2.png -------------------------------------------------------------------------------- /src/assets/img/component-info-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/component-info-card.png -------------------------------------------------------------------------------- /src/assets/img/component-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/component-menu.png -------------------------------------------------------------------------------- /src/assets/img/component-profile-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/component-profile-card.png -------------------------------------------------------------------------------- /src/assets/img/documentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/documentation.png -------------------------------------------------------------------------------- /src/assets/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/dark/github 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/img/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/color/google 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/img/ill_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/ill_header.png -------------------------------------------------------------------------------- /src/assets/img/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/landing.jpg -------------------------------------------------------------------------------- /src/assets/img/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/login.jpg -------------------------------------------------------------------------------- /src/assets/img/pattern_vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/pattern_vue.png -------------------------------------------------------------------------------- /src/assets/img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/profile.jpg -------------------------------------------------------------------------------- /src/assets/img/react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/react.jpg -------------------------------------------------------------------------------- /src/assets/img/register_bg_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/register_bg_2.png -------------------------------------------------------------------------------- /src/assets/img/sketch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/sketch.jpg -------------------------------------------------------------------------------- /src/assets/img/team-1-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/team-1-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/team-1-800x8000.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/team-1-800x8000.jpg -------------------------------------------------------------------------------- /src/assets/img/team-2-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/team-2-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/team-3-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/team-3-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/team-4-470x470.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/team-4-470x470.png -------------------------------------------------------------------------------- /src/assets/img/vue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/vue-notus/da3ce22b0f8db99797884b7f8876498447dc8d8c/src/assets/img/vue.jpg -------------------------------------------------------------------------------- /src/assets/styles/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/components/Cards/CardBarChart.vue: -------------------------------------------------------------------------------- 1 | 24 | 127 | -------------------------------------------------------------------------------- /src/components/Cards/CardLineChart.vue: -------------------------------------------------------------------------------- 1 | 25 | 137 | -------------------------------------------------------------------------------- /src/components/Cards/CardPageVisits.vue: -------------------------------------------------------------------------------- 1 | 172 | -------------------------------------------------------------------------------- /src/components/Cards/CardProfile.vue: -------------------------------------------------------------------------------- 1 | 84 | 95 | -------------------------------------------------------------------------------- /src/components/Cards/CardSettings.vue: -------------------------------------------------------------------------------- 1 | 182 | -------------------------------------------------------------------------------- /src/components/Cards/CardSocialTraffic.vue: -------------------------------------------------------------------------------- 1 | 195 | -------------------------------------------------------------------------------- /src/components/Cards/CardStats.vue: -------------------------------------------------------------------------------- 1 | 38 | 84 | -------------------------------------------------------------------------------- /src/components/Cards/CardTable.vue: -------------------------------------------------------------------------------- 1 | 476 | 518 | -------------------------------------------------------------------------------- /src/components/Dropdowns/IndexDropdown.vue: -------------------------------------------------------------------------------- 1 | 87 | 111 | -------------------------------------------------------------------------------- /src/components/Dropdowns/NotificationDropdown.vue: -------------------------------------------------------------------------------- 1 | 46 | 70 | -------------------------------------------------------------------------------- /src/components/Dropdowns/PagesDropdown.vue: -------------------------------------------------------------------------------- 1 | 87 | 111 | -------------------------------------------------------------------------------- /src/components/Dropdowns/TableDropdown.vue: -------------------------------------------------------------------------------- 1 | 40 | 64 | -------------------------------------------------------------------------------- /src/components/Dropdowns/UserDropdown.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 85 | -------------------------------------------------------------------------------- /src/components/Footers/Footer.vue: -------------------------------------------------------------------------------- 1 | 163 | 172 | -------------------------------------------------------------------------------- /src/components/Footers/FooterAdmin.vue: -------------------------------------------------------------------------------- 1 | 61 | 70 | -------------------------------------------------------------------------------- /src/components/Footers/FooterSmall.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 82 | -------------------------------------------------------------------------------- /src/components/Headers/HeaderStats.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 71 | -------------------------------------------------------------------------------- /src/components/Maps/MapExample.vue: -------------------------------------------------------------------------------- 1 | 9 | 90 | -------------------------------------------------------------------------------- /src/components/Navbars/AdminNavbar.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 51 | -------------------------------------------------------------------------------- /src/components/Navbars/AuthNavbar.vue: -------------------------------------------------------------------------------- 1 | 99 | 117 | -------------------------------------------------------------------------------- /src/components/Navbars/IndexNavbar.vue: -------------------------------------------------------------------------------- 1 | 95 | 96 | 115 | -------------------------------------------------------------------------------- /src/components/Sidebar/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 347 | ); } 348 | 349 | 370 | -------------------------------------------------------------------------------- /src/layouts/Admin.vue: -------------------------------------------------------------------------------- 1 | 14 | 29 | -------------------------------------------------------------------------------- /src/layouts/Auth.vue: -------------------------------------------------------------------------------- 1 | 16 | 34 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import { createWebHistory, createRouter } from "vue-router"; 3 | 4 | // styles 5 | 6 | import "@fortawesome/fontawesome-free/css/all.min.css"; 7 | import "@/assets/styles/tailwind.css"; 8 | 9 | // mouting point for the whole app 10 | 11 | import App from "@/App.vue"; 12 | 13 | // layouts 14 | 15 | import Admin from "@/layouts/Admin.vue"; 16 | import Auth from "@/layouts/Auth.vue"; 17 | 18 | // views for Admin layout 19 | 20 | import Dashboard from "@/views/admin/Dashboard.vue"; 21 | import Settings from "@/views/admin/Settings.vue"; 22 | import Tables from "@/views/admin/Tables.vue"; 23 | import Maps from "@/views/admin/Maps.vue"; 24 | 25 | // views for Auth layout 26 | 27 | import Login from "@/views/auth/Login.vue"; 28 | import Register from "@/views/auth/Register.vue"; 29 | 30 | // views without layouts 31 | 32 | import Landing from "@/views/Landing.vue"; 33 | import Profile from "@/views/Profile.vue"; 34 | import Index from "@/views/Index.vue"; 35 | 36 | // routes 37 | 38 | const routes = [ 39 | { 40 | path: "/admin", 41 | redirect: "/admin/dashboard", 42 | component: Admin, 43 | children: [ 44 | { 45 | path: "/admin/dashboard", 46 | component: Dashboard, 47 | }, 48 | { 49 | path: "/admin/settings", 50 | component: Settings, 51 | }, 52 | { 53 | path: "/admin/tables", 54 | component: Tables, 55 | }, 56 | { 57 | path: "/admin/maps", 58 | component: Maps, 59 | }, 60 | ], 61 | }, 62 | { 63 | path: "/auth", 64 | redirect: "/auth/login", 65 | component: Auth, 66 | children: [ 67 | { 68 | path: "/auth/login", 69 | component: Login, 70 | }, 71 | { 72 | path: "/auth/register", 73 | component: Register, 74 | }, 75 | ], 76 | }, 77 | { 78 | path: "/landing", 79 | component: Landing, 80 | }, 81 | { 82 | path: "/profile", 83 | component: Profile, 84 | }, 85 | { 86 | path: "/", 87 | component: Index, 88 | }, 89 | { path: "/:pathMatch(.*)*", redirect: "/" }, 90 | ]; 91 | 92 | const router = createRouter({ 93 | history: createWebHistory(), 94 | routes, 95 | }); 96 | 97 | createApp(App).use(router).mount("#app"); 98 | -------------------------------------------------------------------------------- /src/views/Landing.vue: -------------------------------------------------------------------------------- 1 |