├── README.md
├── discount-code.html
├── docs.html
├── hire-us.html
├── landingpage
├── index.html
└── style.css
└── package
├── .env
├── .eslintrc.cjs
├── .gitignore
├── .prettierrc
├── README.md
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── public
├── _redirects
├── assets
│ └── images
│ │ ├── icon
│ │ ├── danger.svg
│ │ ├── success.svg
│ │ └── warning.svg
│ │ ├── products
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ └── 4.jpg
│ │ └── users
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ ├── 5.jpg
│ │ ├── 6.jpg
│ │ ├── 7.jpg
│ │ ├── 8.jpg
│ │ ├── user.jpg
│ │ └── user2.jpg
└── favicon.svg
├── src
├── .vscode
│ └── settings.json
├── App.vue
├── assets
│ └── images
│ │ ├── background
│ │ ├── errorimg.svg
│ │ └── rocket.png
│ │ ├── blog
│ │ ├── blog-img1.jpg
│ │ └── blog-img4.jpg
│ │ ├── favicon.svg
│ │ ├── logos
│ │ ├── logo-adminmart.svg
│ │ ├── logo.svg
│ │ └── logolight.svg
│ │ ├── products
│ │ ├── s11.jpg
│ │ ├── s4.jpg
│ │ ├── s5.jpg
│ │ └── s7.jpg
│ │ ├── technology
│ │ ├── angular-cat-icon.svg
│ │ ├── bt-cat-icon.svg
│ │ ├── next-cat-icon.svg
│ │ ├── nuxt-cat-icon.svg
│ │ ├── react-cat-icon.svg
│ │ ├── tailwind-icon.svg
│ │ └── vue-cat-icon.svg
│ │ └── users
│ │ └── avatar-1.jpg
├── components
│ ├── auth
│ │ ├── LoginForm.vue
│ │ └── RegisterForm.vue
│ ├── dashboard
│ │ ├── MonthlyEarnings.vue
│ │ ├── ProductCards.vue
│ │ ├── ProductPerformance.vue
│ │ ├── RecentTransaction.vue
│ │ ├── SalesOverview.vue
│ │ └── YearlyBreakup.vue
│ ├── shared
│ │ ├── CardHeaderFooter.vue
│ │ ├── UiChildCard.vue
│ │ ├── UiParentCard.vue
│ │ ├── UiTableCard.vue
│ │ ├── UiTextfieldPrimary.vue
│ │ ├── WidgetCard.vue
│ │ └── WidgetCardv2.vue
│ ├── style-components
│ │ ├── shadow
│ │ │ └── Shadow.vue
│ │ └── typography
│ │ │ ├── DefaultText.vue
│ │ │ └── Heading.vue
│ └── ui-components
│ │ ├── alert
│ │ ├── Basic.vue
│ │ ├── Closable.vue
│ │ └── Filled.vue
│ │ ├── button
│ │ ├── BaseButtons.vue
│ │ ├── ColorsButtons.vue
│ │ ├── IconColorSizes.vue
│ │ ├── OutlinedButtons.vue
│ │ ├── SizeButtons.vue
│ │ └── TextButtons.vue
│ │ └── cards
│ │ ├── CardsContentWrap.vue
│ │ ├── CardsMedia.vue
│ │ ├── CardsProps.vue
│ │ ├── CardsSlots.vue
│ │ ├── CardsTwitter.vue
│ │ └── CardsWeather.vue
├── data
│ └── dashboard
│ │ └── dashboardData.ts
├── layouts
│ ├── blank
│ │ └── BlankLayout.vue
│ └── full
│ │ ├── FullLayout.vue
│ │ ├── Main.vue
│ │ ├── Topbar.vue
│ │ ├── logo
│ │ ├── Logo.vue
│ │ ├── LogoDark.vue
│ │ └── LogoLight.vue
│ │ ├── vertical-header
│ │ ├── NotificationDD.vue
│ │ └── ProfileDD.vue
│ │ └── vertical-sidebar
│ │ ├── Icon.vue
│ │ ├── NavCollapse
│ │ └── NavCollapse.vue
│ │ ├── NavGroup
│ │ └── index.vue
│ │ ├── NavItem
│ │ └── index.vue
│ │ ├── extrabox
│ │ └── ExtraBox.vue
│ │ └── sidebarItem.ts
├── main.ts
├── plugins
│ └── vuetify.ts
├── router
│ ├── AuthRoutes.ts
│ ├── MainRoutes.ts
│ └── index.ts
├── scss
│ ├── _override.scss
│ ├── _variables.scss
│ ├── components
│ │ ├── _VButtons.scss
│ │ ├── _VCard.scss
│ │ ├── _VInput.scss
│ │ ├── _VNavigationDrawer.scss
│ │ ├── _VShadow.scss
│ │ └── _VTextField.scss
│ ├── layout
│ │ ├── _container.scss
│ │ ├── _sidebar.scss
│ │ └── _topbar.scss
│ ├── pages
│ │ ├── _auth.scss
│ │ └── _dashboards.scss
│ └── style.scss
├── theme
│ └── LightTheme.ts
├── types
│ ├── dashboard
│ │ └── index.ts
│ └── themeTypes
│ │ └── ThemeType.ts
└── views
│ ├── auth
│ ├── Login.vue
│ └── Register.vue
│ ├── components
│ ├── Shadow.vue
│ └── Typography.vue
│ ├── dashboard
│ └── index.vue
│ ├── pages
│ ├── Error404.vue
│ ├── Icons.vue
│ └── SamplePage.vue
│ └── ui-components
│ ├── Alerts.vue
│ ├── Buttons.vue
│ ├── Cards.vue
│ └── Tables.vue
├── tsconfig.json
├── tsconfig.vite-config.json
└── vite.config.ts
/README.md:
--------------------------------------------------------------------------------
1 |
6 |
7 |
12 |
13 | Download most useful and comprehensive 🚀 Free Vue admin template built for developers 🛠
14 |
15 |
16 |
18 |
19 |
20 | ## 👋 Introduction
21 |
22 | **Modernize** is a free and modern **Vue.js admin dashboard template** built with **Vuetify**, **TypeScript**, **Vite**, and **ApexCharts**. Designed for speed, flexibility, and ease of use, it’s the perfect foundation for **SaaS dashboards**, **admin panels**, **analytics tools**, and **internal applications**.
23 |
24 | With a clean UI, responsive layout, and pre-built components, Modernize helps you launch faster — without wasting time on boilerplate. Powered by **Vue-ApexCharts** and **Vue Tabler Icons**, it offers interactive data visualizations and elegant design out of the box.
25 |
26 | Fully customizable and production-ready, Modernize is your go-to template for building modern, high-performance Vue.js dashboards.
27 |
28 |
29 | ### 🔑 Key Features
30 |
31 | - **Responsive Design**
32 | Delivers a seamless experience across desktops, tablets, and mobile devices with Vuetify’s powerful grid system.
33 |
34 | - **Customizable Components**
35 | Built with reusable and extendable components using Vuetify — easily adapt styles, layouts, and themes to fit your brand.
36 |
37 | - **Vuetify Integration**
38 | Utilizes Vuetify’s modern Material Design framework for a polished, accessible, and consistent UI out of the box.
39 |
40 | - **Pre-built Pages**
41 | Includes essential pages like dashboards, login, user profiles, settings, and error pages to accelerate your development process.
42 |
43 | - **Vue-ApexCharts Integration**
44 | Interactive and dynamic charts for effective data visualization with minimal configuration.
45 |
46 | - **TypeScript Support**
47 | Full TypeScript support for better type safety, scalability, and developer productivity.
48 |
49 | - **Vite-Powered Performance**
50 | Lightning-fast development and optimized production builds with Vite, ensuring quick load times and smooth performance.
51 |
52 | ---
53 |
54 |
55 | ## 🛠️ Notable Libraries and Tools
56 |
57 | | **Library / Tool** | **Description** |
58 | |--------------------------|---------------------------------------------------------------------------------|
59 | | **Vue.js** | A progressive JavaScript framework for building user interfaces and single-page applications. |
60 | | **TypeScript** | A strongly typed superset of JavaScript that enhances developer productivity and code maintainability. |
61 | | **Vuetify** | A popular Vue UI framework based on Material Design, offering a rich set of responsive and accessible components. |
62 | | **Vite** | A fast build tool and development server that significantly improves performance and DX for modern web apps. |
63 | | **Vue-ApexCharts** | A Vue wrapper for ApexCharts that enables dynamic, interactive, and customizable data visualizations. |
64 | | **Vue Tabler Icons** | Clean, customizable SVG icon library for modern Vue applications, inspired by Tabler Icons. |
65 |
66 | ---
67 |
68 | ## 💾 Installation Guide
69 |
70 | Welcome to the **Modernize Free Vue js Admin Dashboard**! This guide will walk you through the installation and setup process, so you can get started with building your custom admin dashboard in no time.
71 |
72 | ### 📝 Steps to Install
73 |
74 | #### 1. **Clone the Repository**
75 |
76 | The easiest way to get started is by cloning the repository or download the zip file. You can do this with the following command:
77 |
78 | ```bash
79 | git clone https://github.com/adminmart/Modernize-vuejs-free.git
80 | ```
81 |
82 | #### 2. **Install Dependencies**
83 |
84 | Install the relative Dependencies of the template. You can do this with the following command:
85 |
86 | ```bash
87 | npm install
88 | ```
89 |
90 | #### 3. **Start the Development Server**
91 |
92 | Once the dependencies are installed, you can start a local development server to preview the template:
93 |
94 | ```bash
95 | npm run dev
96 | ```
97 |
98 | ---
99 |
100 | ## 📝 Documentation
101 |
102 | Welcome to the **Modernize Free Vue js Admin Dashboard** documentation! Whether you're just getting started or looking to explore advanced features, this guide will help you set up and customize your project with ease.
103 |
104 | 👉 **[Click here to read the full documentation](https://adminmart.github.io/free-documentation/vue/modernize/index.html?ref=56)**
105 |
106 | ---
107 |
108 | ## 💎 Pro Version
109 |
110 | The Pro Version of the **Modernize Vue js Admin Dashboard** comes packed with essential features—ideal for personal projects, prototypes, or small-scale applications. When you're ready to level up, the Pro Version unlocks a powerful suite of extras, including multiple theme options, advanced UI widgets, real-time notifications, priority support, and a host of other premium tools designed to supercharge your development workflow.
111 |
112 |
120 |
121 | [](https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/?ref=56)
122 |
123 | ---
124 |
125 | ## ⚖️ Free vs Pro Version Comparison
126 |
127 | The **Free Version** of the **Modernize Vue js Admin Dashboard** provides a solid set of features, perfect for personal projects or small applications. However, for businesses or developers looking to unlock more advanced functionality, the **Pro Version** offers exciting features like **multiple themes**, **advanced widgets**, **real-time notifications**, **priority support**, and much more.
128 |
129 |
130 | #### Check out the comparison below to see the key differences between the two versions:
131 |
132 | | **Feature** | **Free Version** | **Pro Version** |
133 | |-----------------------------------|----------------------------------------|-----------------------------------------------------|
134 | | **Demo** | [](https://modernize-vue3-free.netlify.app/?ref=56) | [](https://modernize-vuejs.adminmart.com/dashboards/modern?ref=56) |
135 | | **Download** | [](https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=56) | [](https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/?ref=56) |
136 | | **Responsive Design** | ✅ Yes | ✅ Yes |
137 | | **Pre-designed Pages** | ✅ Basic Pages | ✅ Advanced Pages (more layouts & options) |
138 | | **Widgets** | ✅ Basic Widgets | ✅ Advanced Widgets (e.g., weather, charts, maps) |
139 | | **Themes** | ✅ Default Theme | ✅ Multiple Themes, Custom Color Skins, and Dark Modes |
140 | | **Support** | ✅ Community Support | ✅ Priority Support with Direct Contact |
141 | | **Additional Components** | ❌ Limited | ✅ Additional Components (Forms, Buttons, More UI Elements) |
142 | | **Advanced Data Visualization** | ❌ Basic Charts | ✅ Advanced Data Visualizations (graphs, complex charts) |
143 | | **Multi-Language Support** | ❌ Not available | ✅ Built-in support for multiple languages |
144 | | **User Permissions & Roles** | ❌ No | ✅ User roles and permissions management |
145 | | **Real-time Notifications** | ❌ Not available | ✅ Real-time notifications for alerts & updates |
146 | | **Advanced Analytics & Reporting**| ❌ Basic reports | ✅ Advanced analytics with custom reports and filters|
147 |
148 |
149 | ---
150 |
151 | ## 🗂️ Other versions
152 |
153 |
154 |
155 |
156 |
157 | Tailwind
159 |
160 |
161 | Bootstrap
163 |
164 |
165 | Next
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
176 |
177 |
178 |
179 |
181 |
182 |
183 |
184 |
186 |
187 |
188 |
189 |
190 |
191 |
192 | React
194 |
195 |
196 | Angular
198 |
199 |
200 | Nuxt
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
211 |
212 |
213 |
214 |
216 |
217 |
218 |
219 |
221 |
222 |
223 |
224 |
225 |
226 | ---
227 |
228 | ## 🤝 Contributing
229 |
230 | We welcome contributions from the community to help improve the **Modernize Free Vue js Admin Dashboard**. Whether it’s fixing bugs, adding new features, improving documentation, or sharing ideas — your input is appreciated!
231 |
232 | ### 🛠️ How to Contribute
233 |
234 | Follow these simple steps to start contributing:
235 |
236 | 1. **Fork the Repository**
237 | Click the **Fork** button on the top-right corner of this repo to create your own copy.
238 |
239 | 2. **Clone Your Fork**
240 | Use the command below to clone your forked repository:
241 | ```bash
242 | git clone https://github.com/adminmart/Modernize-vuejs-free.git
243 |
244 | 3. **Create a New Branch**
245 | Create a new branch to work on your feature or fix. This keeps your changes separate from the main branch:
246 | ```bash
247 | git checkout -b feature/your-feature-name
248 |
249 | 4. **Commit and Push Changes**
250 | After making your changes, commit them with a meaningful message and push your branch to your fork:
251 | ```bash
252 | git commit -am "Add: Description of changes made"
253 | git push origin feature/your-feature-name
254 |
255 | ---
256 |
257 | ## 🧭 Useful Links
258 | - Bootstrap Templates & Themes from AdminMart
259 | - React Templates from AdminMart
260 | - NextJs Templates from AdminMart
261 | - Vue Templates from AdminMart
262 | - Tailwind Templates from AdminMart
263 | - Angular Templates from AdminMart
264 | - Material UI Templates from AdminMart
265 | - Vuetify Themes from AdminMart
266 | - Nuxt Js Templates from AdminMart
267 |
268 | ---
269 |
270 | ## 🌐 We are social
271 |
272 | [](https://github.com/adminmart) [](https://www.facebook.com/official.adminmart) [](https://www.instagram.com/adminmart.official/) [](https://www.youtube.com/@adminmart-official) [](https://www.linkedin.com/in/admin-mart-5ba892249/)
273 |
--------------------------------------------------------------------------------
/discount-code.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Discount Code
8 |
91 |
92 |
93 |
94 |
30% OFF
95 |
On Premium
96 |
Product
97 |
Use Coupon code : upgrade30
98 |
99 |
100 |
Get Now
101 |
102 |
Modernize Vuetify + Vuejs Free Template | Docs
5 | Modernize Vuetify + Vuejs Free Template
13 | https://adminmart.github.io/free-documentation/vue/modernize/index.html
17 |
18 |
19 |
--------------------------------------------------------------------------------
/hire-us.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Modernize Vuetify + Vuejs Free Template
5 | Modernize Vuetify + Vuejs Free Template
13 | https://adminmart.com/hire-us/
16 |
17 |
18 |
--------------------------------------------------------------------------------
/landingpage/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Modernize Free Vuejs Admin Template by Adminmart
8 |
9 |
10 |
11 |
21 |
22 |
23 |
24 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
Free Version
67 |
68 |
69 |
72 |
73 |
80 |
81 |
82 |
83 |
84 |
85 |
88 |
89 |
91 |
92 |
94 |
95 |
97 |
98 |
100 |
101 |
103 |
104 |
107 |
108 |
109 |
110 |
111 |
112 |
114 |
115 |
117 |
118 |
120 |
121 |
123 |
124 |
126 |
127 |
130 |
131 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | Pro Version
149 |
150 |
151 |
152 |
155 |
156 |
163 |
164 |
165 |
166 |
167 |
169 |
170 |
172 |
173 |
175 |
176 |
178 |
179 |
181 |
182 |
184 |
185 |
187 |
188 |
189 |
191 |
192 |
194 |
195 |
197 |
198 |
200 |
201 |
203 |
204 |
205 |
206 |
207 |
208 |
210 |
211 |
213 |
214 |
216 |
217 |
219 |
220 |
222 |
223 |
225 |
226 |
228 |
229 |
231 |
232 |
234 |
235 |
237 |
238 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
249 |
250 |
251 | All Rights Reserved by Modernize Vuetify Admin. Designed and Developed
252 | by
253 | adminmart.com
254 |
255 |
256 |
Live Preview
6 | # Chekcout the Pro Version : https://adminmart.com/product/modernize-vuetify-vue-admin-dashboard/
7 |
--------------------------------------------------------------------------------
/package/env.d.ts:
--------------------------------------------------------------------------------
1 | /// Modernize - Vue3 Typescript based Admin Dashboard Template
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "modernize-vuejs-free",
3 | "version": "2.0.0",
4 | "type": "module",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vue-tsc --noEmit && vite build",
8 | "preview": "vite preview --port 5050",
9 | "typecheck": "vue-tsc --noEmit",
10 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
11 | },
12 | "dependencies": {
13 | "apexcharts": "4.5.0",
14 | "vite-plugin-vuetify": "2.1.0",
15 | "vue": "3.5.13",
16 | "vue-router": "4.5.0",
17 | "vue-tabler-icons": "2.21.0",
18 | "vue3-apexcharts": "1.5.2",
19 | "vue3-perfect-scrollbar": "1.6.1",
20 | "vuetify": "3.7.18",
21 | "@iconify/vue": "4.3.0"
22 | },
23 | "devDependencies": {
24 | "@mdi/font": "7.4.47",
25 | "@rushstack/eslint-patch": "1.11.0",
26 | "@types/chance": "1.1.6",
27 | "@types/node": "22.13.13",
28 | "@vitejs/plugin-vue": "5.2.3",
29 | "@vue/eslint-config-prettier": "10.2.0",
30 | "@vue/eslint-config-typescript": "14.5.0",
31 | "@vue/tsconfig": "^0.1.3",
32 | "eslint": "9.23.0",
33 | "eslint-plugin-vue": "10.0.0",
34 | "prettier": "3.5.3",
35 | "sass": "1.70.0",
36 | "sass-loader": "14.1.0",
37 | "typescript": "^5.8.2",
38 | "vite": "6.2.3",
39 | "vue-cli-plugin-vuetify": "2.5.8",
40 | "vue-tsc": "2.2.8"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/package/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 |
--------------------------------------------------------------------------------
/package/public/assets/images/icon/danger.svg:
--------------------------------------------------------------------------------
1 |
2 | logo-svg
3 |
7 |
9 |
11 |
--------------------------------------------------------------------------------
/package/src/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "vue3snippets.enable-compile-vue-file-on-did-save-code": false
3 | }
--------------------------------------------------------------------------------
/package/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
--------------------------------------------------------------------------------
/package/src/assets/images/background/errorimg.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
39 |
40 |
41 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/package/src/assets/images/background/rocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/background/rocket.png
--------------------------------------------------------------------------------
/package/src/assets/images/blog/blog-img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/blog/blog-img1.jpg
--------------------------------------------------------------------------------
/package/src/assets/images/blog/blog-img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/blog/blog-img4.jpg
--------------------------------------------------------------------------------
/package/src/assets/images/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 | logo-svg
3 |
7 |
9 |
11 |
--------------------------------------------------------------------------------
/package/src/assets/images/logos/logo-adminmart.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/package/src/assets/images/logos/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
7 |
8 |
--------------------------------------------------------------------------------
/package/src/assets/images/logos/logolight.svg:
--------------------------------------------------------------------------------
1 |
2 |
6 |
--------------------------------------------------------------------------------
/package/src/assets/images/products/s11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/products/s11.jpg
--------------------------------------------------------------------------------
/package/src/assets/images/products/s4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/products/s4.jpg
--------------------------------------------------------------------------------
/package/src/assets/images/products/s5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/products/s5.jpg
--------------------------------------------------------------------------------
/package/src/assets/images/products/s7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/products/s7.jpg
--------------------------------------------------------------------------------
/package/src/assets/images/technology/angular-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/bt-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/next-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/nuxt-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/react-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/package/src/assets/images/technology/tailwind-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/src/assets/images/users/avatar-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-vuejs-free/a63d59e80938ac785fc8319572cdc7d1fe199044/package/src/assets/images/users/avatar-1.jpg
--------------------------------------------------------------------------------
/package/src/components/auth/LoginForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Username
10 |
12 |
13 | Password
14 |
16 |
17 |
18 |
19 | Remeber this Device
20 |
21 |
22 | Forgot
24 | Password ?
25 |
26 |
28 |
29 | Sign in
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/package/src/components/auth/RegisterForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Name
10 |
12 |
13 | Email Address
14 |
16 |
17 | Password
18 |
20 |
21 | Sign up
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/MonthlyEarnings.vue:
--------------------------------------------------------------------------------
1 |
56 |
57 |
58 |
59 |
60 | Monthly Earnings
61 |
62 |
63 |
65 |
66 |
67 |
68 |
69 |
70 |
$6,820
71 |
72 |
73 |
75 |
+9%
76 |
last year
77 |
78 |
80 |
81 |
82 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/ProductCards.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 |
16 | Add To Cart
20 |
21 |
22 |
23 |
24 |
26 |
27 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/ProductPerformance.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Recent Transactions
8 |
9 |
10 |
11 | Id
12 | Assigned
13 | Name
14 | Priority
15 | Budget
16 |
17 |
18 |
19 |
20 |
21 | {{ item.id }}
22 |
23 |
24 |
25 |
{{ item.name }}
26 |
{{ item.post }}
27 |
29 |
30 | {{ item.pname }}
31 |
32 |
33 | {{
34 | item.status
35 | }}
36 |
37 |
38 | {{ item.budget }}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/RecentTransaction.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Recent Transactions
10 |
11 |
12 |
13 |
14 | {{ list.title }}
15 |
16 |
17 |
19 |
20 |
21 | {{ list.subtitle }}
22 | {{ list.subtitle }}
23 |
24 | {{
25 | list.link
26 | }}
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
43 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/SalesOverview.vue:
--------------------------------------------------------------------------------
1 |
86 |
87 |
88 |
89 |
90 |
Sales Overview
91 |
92 |
95 |
101 |
102 |
--------------------------------------------------------------------------------
/package/src/components/dashboard/YearlyBreakup.vue:
--------------------------------------------------------------------------------
1 |
44 |
45 |
46 |
47 |
48 | Yearly Breakup
49 |
50 |
51 |
52 |
53 |
$36,358
54 |
55 |
56 |
58 |
+9%
59 |
last year
60 |
61 |
62 |
63 |
65 |
66 |
68 |
69 |
71 |
72 |
75 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/package/src/components/shared/CardHeaderFooter.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
17 |
19 |
21 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiChildCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | {{ title }}
11 |
12 |
14 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiParentCard.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 | // ===============================|| Ui Parent Card||=============================== //
9 |
10 |
11 |
12 |
13 |
{{ title }}
14 |
15 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiTableCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
19 |
20 |
--------------------------------------------------------------------------------
/package/src/components/shared/UiTextfieldPrimary.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
10 |
--------------------------------------------------------------------------------
/package/src/components/shared/WidgetCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
17 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/package/src/components/shared/WidgetCardv2.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{ title }}
15 |
16 |
20 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package/src/components/style-components/shadow/Shadow.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 | {{ n }}
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/src/components/style-components/typography/DefaultText.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
17 |
18 |
19 |
{{ name1 }}
20 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
21 |
23 |
24 |
26 |
--------------------------------------------------------------------------------
/package/src/components/style-components/typography/Heading.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
{{ name }}
29 |
32 |
34 |
35 |
38 |
39 |
40 |
41 |
{{ name1 }} {{ val1 }}
42 |
45 |
47 |
48 |
50 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/alert/Basic.vue:
--------------------------------------------------------------------------------
1 |
2 | This is an error alert — check it out!
3 | This is a warning alert — check it out!
4 | This is an info alert — check it out!
5 | This is a success alert — check it out!
6 |
7 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/alert/Closable.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
16 | Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
17 |
18 | Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
19 |
20 |
23 |
26 | Reset
27 |
28 |
29 |
31 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/alert/Filled.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | This is an error alert — check it out!
4 | This is a warning alert — check it out!
5 | This is an info alert — check it out!
6 | This is a success alert — check it out!
7 |
8 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/BaseButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | elevates (default)
4 | flat
5 | tonal
6 | outlined
7 | text
8 | plain
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/ColorsButtons.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {{ btn }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/IconColorSizes.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/OutlinedButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | primary
5 | secondary
6 |
7 | Disabled
8 |
9 | link
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/SizeButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Extra small
5 |
6 |
7 |
8 | Small
9 |
10 |
11 |
12 | Normal
13 |
14 |
15 |
16 | Large
17 |
18 |
19 |
20 | Extra large
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/button/TextButtons.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {{ btn }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsContentWrap.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
40 |
41 |
47 |
48 |
50 |
51 | Messages
52 |
53 |
54 |
56 |
57 |
58 |
59 |
60 |
61 | Today
62 |
63 |
64 |
70 |
71 |
72 | {{ message.from }} @{{ message.time }}
73 |
74 |
{{ message.message }}
75 |
77 |
78 |
79 |
80 |
81 |
83 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsMedia.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
17 | Top 10 Australian beaches
18 |
19 |
20 | Number 10
21 |
22 |
23 | Whitehaven Beach
24 |
25 | Whitsunday Island, Whitsunday Islands
26 |
27 |
28 |
29 | Share
30 |
31 | Explore
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsProps.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsSlots.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | This is a title
9 |
10 | This is a subtitle
11 |
12 | This is content
14 |
15 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsTwitter.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
17 |
19 |
20 |
21 | "Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as well."
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 | Evan You
34 |
35 | Vue Creator
36 |
37 |
38 |
39 | 256
41 | ·
42 | 45
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/package/src/components/ui-components/cards/CardsWeather.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
40 |
41 |
42 |
43 |
44 |
48 | 64°F
49 |
50 |
51 |
52 |
58 |
59 |
60 |
61 |
62 |
66 | 123 km/h
67 |
68 |
69 |
73 | 48%
74 |
75 |
76 |
77 |
78 |
79 |
80 |
93 |
94 |
95 |
102 |
103 |
104 |
106 |
107 |
110 |
111 | {{ !expand ? 'Full Report' : 'Hide Report' }}
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/package/src/data/dashboard/dashboardData.ts:
--------------------------------------------------------------------------------
1 | import type { recentTrans, productPerformanceType, productsCards } from '@/types/dashboard/index';
2 |
3 | /*--Recent Transaction--*/
4 | const recentTransaction: recentTrans[] = [
5 | {
6 | title: '09:30 am',
7 | subtitle: 'Payment received from John Doe of $385.90',
8 | textcolor: 'primary',
9 | boldtext: false,
10 | line: true,
11 | link: '',
12 | url: ''
13 | },
14 | {
15 | title: '10:00 am',
16 | subtitle: 'New sale recorded',
17 | textcolor: 'secondary',
18 | boldtext: true,
19 | line: true,
20 | link: '#ML-3467',
21 | url: ''
22 | },
23 | {
24 | title: '12:00 am',
25 | subtitle: 'Payment was made of $64.95 to Michael',
26 | textcolor: 'success',
27 | boldtext: false,
28 | line: true,
29 | link: '',
30 | url: ''
31 | },
32 | {
33 | title: '09:30 am',
34 | subtitle: 'New sale recorded',
35 | textcolor: 'warning',
36 | boldtext: true,
37 | line: true,
38 | link: '#ML-3467',
39 | url: ''
40 | },
41 | {
42 | title: '09:30 am',
43 | subtitle: 'New arrival recorded',
44 | textcolor: 'error',
45 | boldtext: true,
46 | line: true,
47 | link: '',
48 | url: ''
49 | },
50 | {
51 | title: '12:00 am',
52 | subtitle: 'Payment Received',
53 | textcolor: 'success',
54 | boldtext: false,
55 | line: false,
56 | link: '',
57 | url: ''
58 | },
59 | ]
60 |
61 | /*Basic Table 1*/
62 | const productPerformance: productPerformanceType[] = [
63 | {
64 | id: 1,
65 | name: 'Sunil Joshi',
66 | post: 'Web Designer',
67 | pname: 'Elite Admin',
68 | status: 'Low',
69 | statuscolor: 'primary',
70 | budget: '$3.9'
71 | },
72 | {
73 | id: 2,
74 | name: 'Andrew McDownland',
75 | post: 'Project Manager',
76 | pname: 'Real Homes WP Theme',
77 | status: 'Medium',
78 | statuscolor: 'secondary',
79 | budget: '$24.5k'
80 | },
81 | {
82 | id: 3,
83 | name: 'Christopher Jamil',
84 | post: 'Project Manager',
85 | pname: 'MedicalPro WP Theme',
86 | status: 'High',
87 | statuscolor: 'error',
88 | budget: '$12.8k'
89 | },
90 | {
91 | id: 4,
92 | name: 'Nirav Joshi',
93 | post: 'Frontend Engineer',
94 | pname: 'Hosting Press HTML',
95 | status: 'Critical',
96 | statuscolor: 'success',
97 | budget: '$2.4k'
98 | }
99 |
100 | ];
101 |
102 | /*--Products Cards--*/
103 | import proimg1 from '@/assets/images/products/s4.jpg';
104 | import proimg2 from '@/assets/images/products/s5.jpg';
105 | import proimg3 from '@/assets/images/products/s7.jpg';
106 | import proimg4 from '@/assets/images/products/s11.jpg';
107 | const productsCard: productsCards[] = [
108 | {
109 | title: 'Boat Headphone',
110 | link: '/',
111 | photo: proimg1,
112 | salesPrice: 375,
113 | price: 285,
114 | rating: 4
115 | },
116 | {
117 | title: 'MacBook Air Pro',
118 | link: '/',
119 | photo: proimg2,
120 | salesPrice: 650,
121 | price: 900,
122 | rating: 5
123 | },
124 | {
125 | title: 'Red Valvet Dress',
126 | link: '/',
127 | photo: proimg3,
128 | salesPrice: 150,
129 | price: 200,
130 | rating: 3
131 | },
132 | {
133 | title: 'Cute Soft Teddybear',
134 | link: '/',
135 | photo: proimg4,
136 | salesPrice: 285,
137 | price: 345,
138 | rating: 2
139 | }
140 | ];
141 |
142 |
143 | export { recentTransaction, productPerformance, productsCard }
--------------------------------------------------------------------------------
/package/src/layouts/blank/BlankLayout.vue:
--------------------------------------------------------------------------------
1 | // ===============================|| Blank Layout ||=============================== //
2 |
3 |
4 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/package/src/layouts/full/FullLayout.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
13 |
15 |
16 |
17 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package/src/layouts/full/Main.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
58 |
59 |
77 |
78 |
--------------------------------------------------------------------------------
/package/src/layouts/full/Topbar.vue:
--------------------------------------------------------------------------------
1 |
34 |
35 |
36 |
37 |
55 |
56 |
Checkout Pro Version
57 |
58 |
59 |
60 |
61 | Live Preview
62 |
63 |
64 |
65 |
66 |
67 |
69 |
70 |
71 |
72 |
77 |
78 |
79 |
80 |
81 |
82 |
84 |
--------------------------------------------------------------------------------
/package/src/layouts/full/logo/Logo.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/package/src/layouts/full/logo/LogoDark.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
19 |
20 |
21 |
23 |
29 |
--------------------------------------------------------------------------------
/package/src/layouts/full/logo/LogoLight.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
24 |
25 |
26 |
27 |
28 |
30 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-header/NotificationDD.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-header/ProfileDD.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | My Profile
24 |
25 |
26 |
27 |
29 | My Account
30 |
31 |
32 |
33 |
35 | My Task
36 |
37 |
38 |
39 | Logout
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/Icon.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
14 |
15 |
22 |
23 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/NavCollapse/NavCollapse.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
22 |
23 | {{ item.title}}
24 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/NavGroup/index.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {{ props.item.header}}
7 |
8 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/NavItem/index.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
18 |
19 |
20 |
22 | {{ item.title }}
24 |
25 |
26 |
33 | {{ item.chip }}
34 |
35 |
36 |
37 |
38 |
39 |
40 |
43 |
44 |
45 |
52 | {{ item.chip }}
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/package/src/layouts/full/vertical-sidebar/extrabox/ExtraBox.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
17 |
18 |
26 |
--------------------------------------------------------------------------------
/package/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | import { router } from './router';
4 | import vuetify from './plugins/vuetify';
5 | import '@/scss/style.scss';
6 | import PerfectScrollbar from 'vue3-perfect-scrollbar';
7 | import VueApexCharts from 'vue3-apexcharts';
8 | import VueTablerIcons from 'vue-tabler-icons';
9 | const app = createApp(App);
10 | app.use(router);
11 | app.use(PerfectScrollbar);
12 | app.use(VueTablerIcons);
13 | app.use(VueApexCharts);
14 | app.use(vuetify).mount('#app');
15 |
--------------------------------------------------------------------------------
/package/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 | import { createVuetify } from 'vuetify';
2 | import '@mdi/font/css/materialdesignicons.css';
3 | import * as components from 'vuetify/components';
4 | import * as directives from 'vuetify/directives';
5 | import { BlueTheme} from '@/theme/LightTheme';
6 |
7 |
8 | export default createVuetify({
9 | components,
10 | directives,
11 |
12 | theme: {
13 | defaultTheme: 'BlueTheme',
14 | themes: {
15 | BlueTheme,
16 | }
17 | },
18 | defaults: {
19 | VBtn: {},
20 | VCard: {
21 | rounded: 'md'
22 | },
23 | VTextField: {
24 | rounded: 'lg'
25 | },
26 | VTooltip: {
27 | // set v-tooltip default location to top
28 | location: 'top'
29 | }
30 | }
31 | });
32 |
--------------------------------------------------------------------------------
/package/src/router/AuthRoutes.ts:
--------------------------------------------------------------------------------
1 | const AuthRoutes = {
2 | path: '/auth',
3 | component: () => import('@/layouts/blank/BlankLayout.vue'),
4 | meta: {
5 | requiresAuth: false
6 | },
7 | children: [
8 | {
9 | name: 'Login',
10 | path: '/auth/login',
11 | component: () => import('@/views/auth/Login.vue')
12 | },
13 | {
14 | name: 'Register',
15 | path: '/auth/register',
16 | component: () => import('@/views/auth/Register.vue')
17 | },
18 | ]
19 | };
20 |
21 | export default AuthRoutes;
22 |
--------------------------------------------------------------------------------
/package/src/router/MainRoutes.ts:
--------------------------------------------------------------------------------
1 | const MainRoutes = {
2 | path: '/main',
3 | meta: {
4 | requiresAuth: true
5 | },
6 | redirect: '/main',
7 | component: () => import('@/layouts/full/FullLayout.vue'),
8 | children: [
9 | {
10 | name: 'Dashboard',
11 | path: '/',
12 | component: () => import('@/views/dashboard/index.vue')
13 | },
14 | {
15 | name: 'Typography',
16 | path: '/ui/typography',
17 | component: () => import('@/views/components/Typography.vue')
18 | },
19 | {
20 | name: 'Shadow',
21 | path: '/ui/shadow',
22 | component: () => import('@/views/components/Shadow.vue')
23 | },
24 | {
25 | name: 'Alert',
26 | path: '/ui/alerts',
27 | component: () => import('@/views/ui-components/Alerts.vue')
28 | },
29 | {
30 | name: 'Buttons',
31 | path: '/ui/buttons',
32 | component: () => import('@/views/ui-components/Buttons.vue')
33 | },
34 | {
35 | name: 'Cards',
36 | path: '/ui/cards',
37 | component: () => import('@/views/ui-components/Cards.vue')
38 | },
39 | {
40 | name: 'Tables',
41 | path: '/ui/tables',
42 | component: () => import('@/views/ui-components/Tables.vue')
43 | },
44 | {
45 | name: 'Icons',
46 | path: '/icons',
47 | component: () => import('@/views/pages/Icons.vue')
48 | },
49 | {
50 | name: 'Starter',
51 | path: '/sample-page',
52 | component: () => import('@/views/pages/SamplePage.vue')
53 | },
54 | ]
55 | };
56 |
57 | export default MainRoutes;
58 |
--------------------------------------------------------------------------------
/package/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory } from 'vue-router';
2 | import MainRoutes from './MainRoutes';
3 | import AuthRoutes from './AuthRoutes';
4 |
5 | export const router = createRouter({
6 | history: createWebHistory(import.meta.env.BASE_URL),
7 | routes: [
8 | {
9 | path: '/:pathMatch(.*)*',
10 | component: () => import('@/views/pages/Error404.vue')
11 | },
12 | MainRoutes,
13 | AuthRoutes
14 | ]
15 | });
16 |
17 |
--------------------------------------------------------------------------------
/package/src/scss/_override.scss:
--------------------------------------------------------------------------------
1 | html {
2 | .bg-success {
3 | color: white !important;
4 | }
5 |
6 | .bg-primary {
7 | color: $white !important;
8 | }
9 |
10 | .bg-secondary {
11 | color: $white !important;
12 | }
13 |
14 | .bg-warning {
15 | color: $white !important;
16 | }
17 | }
18 | .border,
19 | .v-divider {
20 | border-color: rgba(var(--v-border-color), 1) !important;
21 | }
22 |
23 | .lh-0{
24 | line-height: 0;
25 | }
26 | .lh-normal{
27 | line-height: normal;
28 | }
--------------------------------------------------------------------------------
/package/src/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:math';
2 | @use 'sass:map';
3 | @use 'sass:meta';
4 | @use 'vuetify/lib/styles/tools/functions' as *;
5 |
6 | // This will false all colors which is not necessory for theme
7 | $color-pack: false;
8 |
9 | // Global font size and border radius
10 | $font-size-root: 1rem;
11 | $border-radius-root: 4px;
12 | $body-font-family: 'Plus Jakarta Sans', sans-serif !default;
13 | $heading-font-family: $body-font-family !default;
14 | $btn-font-weight: 400 !default;
15 | $btn-letter-spacing: 0 !default;
16 |
17 | // Global Radius as per breakeven point
18 | $rounded: () !default;
19 | $rounded: map-deep-merge(
20 | (
21 | 0: 0,
22 | 'sm': $border-radius-root * 0.5,
23 | null: $border-radius-root,
24 | 'md': $border-radius-root * 1,
25 | 'lg': $border-radius-root * 2,
26 | 'xl': $border-radius-root * 6,
27 | 'pill': 9999px,
28 | 'circle': 50%,
29 | 'shaped': $border-radius-root * 6 0
30 | ),
31 | $rounded
32 | );
33 | // Global Typography
34 | $typography: () !default;
35 | $typography: map-deep-merge(
36 | (
37 | 'h1': (
38 | 'size': 2.25rem,
39 | 'weight': 600,
40 | 'line-height': 2.75rem,
41 | 'font-family': inherit
42 | ),
43 | 'h2': (
44 | 'size': 1.875rem,
45 | 'weight': 600,
46 | 'line-height': 2.25rem,
47 | 'font-family': inherit
48 | ),
49 | 'h3': (
50 | 'size': 1.5rem,
51 | 'weight': 600,
52 | 'line-height': 2rem,
53 | 'font-family': inherit
54 | ),
55 | 'h4': (
56 | 'size': 1.3125rem,
57 | 'weight': 600,
58 | 'line-height': 1.6rem,
59 | 'font-family': inherit
60 | ),
61 | 'h5': (
62 | 'size': 1.125rem,
63 | 'weight': 600,
64 | 'line-height': 1.6rem,
65 | 'font-family': inherit
66 | ),
67 | 'h6': (
68 | 'size': 1rem,
69 | 'weight': 600,
70 | 'line-height': 1.2rem,
71 | 'font-family': inherit
72 | ),
73 | 'subtitle-1': (
74 | 'size': 0.875rem,
75 | 'weight': 400,
76 | 'line-height': 1.1rem,
77 | 'font-family': inherit
78 | ),
79 | 'subtitle-2': (
80 | 'size': 0.75rem,
81 | 'weight': 400,
82 | 'line-height': 1rem,
83 | 'font-family': inherit
84 | ),
85 | 'body-1': (
86 | 'size': 0.875rem,
87 | 'weight': 400,
88 | 'font-family': inherit
89 | ),
90 | 'body-2': (
91 | 'size': 0.75rem,
92 | 'weight': 400,
93 | 'font-family': inherit
94 | ),
95 | 'button': (
96 | 'size': 0.875rem,
97 | 'weight': 500,
98 | 'font-family': inherit,
99 | 'text-transform': capitalize
100 | ),
101 | 'caption': (
102 | 'size': 0.75rem,
103 | 'weight': 400,
104 | 'font-family': inherit
105 | ),
106 | 'overline': (
107 | 'size': 0.75rem,
108 | 'weight': 500,
109 | 'font-family': inherit,
110 | 'text-transform': uppercase
111 | )
112 | ),
113 | $typography
114 | );
115 |
116 | // Custom Variables
117 | // colors
118 | $white: #fff !default;
119 |
120 | // cards
121 | $card-item-spacer-xy: 20px 24px !default;
122 | $card-text-spacer: 24px !default;
123 | $card-title-size: 18px !default;
124 | // Global Shadow
125 | $box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
126 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VButtons.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Light Buttons
3 | //
4 |
5 | .v-btn {
6 | &.bg-lightprimary {
7 | &:hover,
8 | &:active,
9 | &:focus {
10 | background-color: rgb(var(--v-theme-primary)) !important;
11 | color: $white !important;
12 | }
13 | }
14 | &.bg-lightsecondary {
15 | &:hover,
16 | &:active,
17 | &:focus {
18 | background-color: rgb(var(--v-theme-secondary)) !important;
19 | color: $white !important;
20 | }
21 | }
22 | &.text-facebook {
23 | &:hover,
24 | &:active,
25 | &:focus {
26 | background-color: rgb(var(--v-theme-facebook)) !important;
27 | color: $white !important;
28 | }
29 | }
30 | &.text-twitter {
31 | &:hover,
32 | &:active,
33 | &:focus {
34 | background-color: rgb(var(--v-theme-twitter)) !important;
35 | color: $white !important;
36 | }
37 | }
38 | &.text-linkedin {
39 | &:hover,
40 | &:active,
41 | &:focus {
42 | background-color: rgb(var(--v-theme-linkedin)) !important;
43 | color: $white !important;
44 | }
45 | }
46 | }
47 |
48 | .v-btn {
49 | text-transform: capitalize;
50 | letter-spacing: $btn-letter-spacing;
51 | }
52 | .v-btn--icon.v-btn--density-default {
53 | width: calc(var(--v-btn-height) + 6px);
54 | height: calc(var(--v-btn-height) + 6px);
55 | }
56 |
57 | .v-btn-group .v-btn {
58 | height: inherit !important;
59 | }
60 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VCard.scss:
--------------------------------------------------------------------------------
1 | // Outline Card
2 | .v-card--variant-outlined {
3 | border-color: rgba(var(--v-theme-borderLight));
4 | .v-divider {
5 | border-color: rgba(var(--v-theme-borderLight));
6 | }
7 | }
8 |
9 | .v-card-text {
10 | padding: $card-text-spacer;
11 | }
12 |
13 | .v-card-actions {
14 | padding: 0.625rem $card-text-spacer $card-text-spacer;
15 | }
16 |
17 | .v-card {
18 | width: 100%;
19 | overflow: visible;
20 | &.withbg {
21 | background-color: rgb(var(--v-theme-background));
22 | }
23 | &.w-auto {
24 | width: auto !important;
25 | }
26 | &.overflow-hidden {
27 | overflow: hidden;
28 | }
29 | }
30 |
31 | .v-card-item {
32 | padding: $card-item-spacer-xy;
33 | }
34 |
35 | .card-hover-border {
36 | &:hover {
37 | border: 1px solid rgb(var(--v-theme-primary));
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/package/src/scss/components/_VInput.scss:
--------------------------------------------------------------------------------
1 | .v-input--density-default,
2 | .v-field--variant-solo,
3 | .v-field--variant-filled {
4 | --v-input-control-height: 51px;
5 | --v-input-padding-top: 14px;
6 | }
7 | .v-input--density-comfortable {
8 | --v-input-control-height: 56px;
9 | --v-input-padding-top: 17px;
10 | }
11 | .v-switch .v-label,
12 | .v-checkbox .v-label {
13 | opacity: 1;
14 | }
15 | .v-label{
16 | opacity: 1;
17 | font-size: 0.875rem;
18 | }
--------------------------------------------------------------------------------
/package/src/scss/components/_VNavigationDrawer.scss:
--------------------------------------------------------------------------------
1 | .v-navigation-drawer__scrim.fade-transition-leave-to {
2 | display: none;
3 | }
4 |
5 | .v-navigation-drawer__scrim{
6 | position: fixed;
7 | }
--------------------------------------------------------------------------------
/package/src/scss/components/_VShadow.scss:
--------------------------------------------------------------------------------
1 | .elevation-10 {
2 | box-shadow: $box-shadow !important;
3 | }
--------------------------------------------------------------------------------
/package/src/scss/components/_VTextField.scss:
--------------------------------------------------------------------------------
1 | .v-text-field input {
2 | font-size: 0.875rem;
3 | }
4 | .v-field__outline {
5 | color: rgb(var(--v-theme-inputBorder),0.5);
6 | }
7 | .inputWithbg {
8 | .v-field--variant-outlined {
9 | background-color: rgba(0, 0, 0, 0.025);
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/package/src/scss/layout/_container.scss:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-y: auto;
3 | }
4 |
5 | .v-main {
6 | margin-right: 20px;
7 | --v-layout-top: 0 !important;
8 | }
9 | @media (max-width: 1279px) {
10 | .v-main {
11 | margin: 0 10px;
12 | }
13 | }
14 | .spacer {
15 | padding: 100px 0;
16 | }
17 | @media (max-width: 800px) {
18 | .spacer {
19 | padding: 40px 0;
20 | }
21 | }
22 | .cursor-pointer {
23 | cursor: pointer;
24 | }
25 | .page-wrapper {
26 | min-height: calc(100vh - 100px);
27 | padding: 24px;
28 | padding-bottom: 30px;
29 |
30 | @media screen and (max-width:600px){
31 | padding: 10px;
32 | }
33 | }
34 | .maxWidth {
35 | max-width: 1200px;
36 | margin: 0 auto;
37 | }
38 | $sizes: (
39 | 'display-1': 44px,
40 | 'display-2': 40px,
41 | 'display-3': 30px,
42 | 'h1': 36px,
43 | 'h2': 30px,
44 | 'h3': 21px,
45 | 'h4': 18px,
46 | 'h5': 16px,
47 | 'h6': 14px,
48 | 'text-8': 8px,
49 | 'text-10': 10px,
50 | 'text-13': 13px,
51 | 'text-15': 15px,
52 | 'text-18': 18px,
53 | 'text-20': 20px,
54 | 'text-24': 24px,
55 | 'body-text-1': 10px
56 | );
57 |
58 | @each $pixel, $size in $sizes {
59 | .#{$pixel} {
60 | font-size: $size;
61 | line-height: $size + 10;
62 | }
63 | }
64 |
65 | .customizer-btn {
66 | position: fixed;
67 | bottom: 30px;
68 | right: 30px;
69 | border-radius: 50%;
70 | .icon {
71 | animation: progress-circular-rotate 1.4s linear infinite;
72 | transform-origin: center center;
73 | transition: all 0.2s ease-in-out;
74 | }
75 | }
76 | .fixed-width {
77 | max-width: 1300px;
78 | }
79 | .h-100 {
80 | height: 100%;
81 | }
82 | .w-100 {
83 | width: 100%;
84 | }
85 |
86 | .h-100vh {
87 | height: 100vh;
88 | }
89 | .gap-2 {
90 | gap: 8px;
91 | }
92 |
93 | .gap-3 {
94 | gap: 16px;
95 | }
96 |
97 | .gap-4 {
98 | gap: 24px;
99 | }
100 |
101 | .text-white {
102 | color: rgb(255, 255, 255) !important;
103 | }
104 | // border
105 | .border-right {
106 | border-right: 1px solid rgba(0, 0, 0, 0.12);
107 | }
108 | .border-bottom {
109 | border-bottom: 1px solid rgba(0, 0, 0, 0.05);
110 | }
111 | .opacity-50 {
112 | opacity: 0.5;
113 | }
114 | .link {
115 | color: rgb(var(--v-theme-lightText));
116 | text-decoration: none;
117 | &:hover {
118 | color: rgb(var(--v-theme-primary));
119 | }
120 | }
121 | .z-auto.v-card {
122 | z-index: auto;
123 | }
124 |
125 | .obj-cover {
126 | object-fit: cover;
127 | }
128 |
129 | .right-pos-img {
130 | position: absolute;
131 | right: 0;
132 | top: 0;
133 | height: 100%;
134 | }
135 |
136 | .text-hover-primary {
137 | color: rgb(var(--v-theme-darkText));
138 | &:hover {
139 | color: rgb(var(--v-theme-primary));
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/package/src/scss/layout/_sidebar.scss:
--------------------------------------------------------------------------------
1 | /*This is for the logo*/
2 | .leftSidebar {
3 | box-shadow: none !important;
4 | border-right: 1px solid rgb(var(--v-theme-borderColor));
5 | top: 75px !important;
6 | .logo {
7 | padding-left: 7px;
8 | }
9 |
10 | .mini-icon {
11 | display: none;
12 | }
13 |
14 | .mini-text {
15 | display: block;
16 | }
17 |
18 | .v-navigation-drawer__content {
19 |
20 | .side-profile {
21 | position: absolute;
22 | top: -15px;
23 | right: 0;
24 | max-height: 100px;
25 | }
26 | .side-profile-text{
27 | max-width: 100px;
28 | }
29 | }
30 | }
31 |
32 | /*This is for the Vertical sidebar*/
33 | .scrollnavbar {
34 | height: calc(100vh - 150px);
35 |
36 | .userbottom {
37 | position: fixed;
38 | bottom: 0px;
39 | width: 100%;
40 | }
41 |
42 | .smallCap {
43 | padding: 3px 0px !important;
44 | font-size: 0.875rem;
45 | font-weight: 500;
46 | margin-top: 24px;
47 | color: rgb(var(--v-theme-textPrimary));
48 |
49 | &:first-child {
50 | margin-top: 0 !important;
51 | }
52 | }
53 |
54 | /*General Menu css*/
55 | .v-list-group__items .v-list-item,
56 | .v-list-item {
57 | border-radius: $border-radius-root + 4;
58 | padding-inline-start: calc(12px + var(--indent-padding) / 10) !important;
59 |
60 | margin: 0 0 2px;
61 |
62 | &:hover {
63 | color: rgb(var(--v-theme-primary));
64 | }
65 |
66 | .v-list-item__prepend {
67 | margin-inline-end: 13px;
68 | }
69 |
70 | .v-list-item__append {
71 | font-size: 0.875rem;
72 |
73 | .v-icon {
74 | margin-inline-start: 13px;
75 | }
76 | }
77 |
78 | .v-list-item-title {
79 | font-size: 0.875rem;
80 | }
81 | }
82 |
83 | .v-list {
84 | color: rgb(var(--v-theme-textSecondary));
85 |
86 | >.v-list-item.v-list-item--active,
87 | .v-list-item--active>.v-list-item__overlay {
88 | background: rgb(var(--v-theme-primary));
89 | color: white !important;
90 | }
91 |
92 | >.v-list-group {
93 | position: relative;
94 |
95 | >.v-list-item--active,
96 | >.v-list-item--active:hover {
97 | background: rgb(var(--v-theme-primary));
98 | color: white;
99 | }
100 |
101 | .v-list-group__items .v-list-item.v-list-item--active,
102 | .v-list-group__items .v-list-item.v-list-item--active>.v-list-item__overlay {
103 | background: transparent;
104 | color: rgb(var(--v-theme-primary));
105 | }
106 | }
107 | }
108 | }
109 |
110 | @media only screen and (min-width: 1170px) {
111 | .mini-sidebar {
112 | .logo {
113 | width: 40px;
114 | overflow: hidden;
115 | padding-left: 0;
116 | }
117 |
118 | .mini-icon {
119 | display: block;
120 | }
121 |
122 | .mini-text {
123 | display: none;
124 | }
125 |
126 | .v-list {
127 | padding: 14px !important;
128 | }
129 |
130 | .leftSidebar:hover {
131 | box-shadow: $box-shadow !important;
132 |
133 | .mini-icon {
134 | display: none;
135 | }
136 |
137 | .mini-text {
138 | display: block;
139 | }
140 | }
141 |
142 | .v-navigation-drawer--expand-on-hover:hover {
143 | .logo {
144 | width: 100%;
145 | }
146 |
147 | .v-list .v-list-group__items,
148 | .hide-menu {
149 | opacity: 1;
150 | }
151 | }
152 | }
153 | }
154 |
155 | @media screen and (max-width:1280px) {
156 | .leftSidebar {
157 | top: 0 !important;
158 | }
159 | }
--------------------------------------------------------------------------------
/package/src/scss/layout/_topbar.scss:
--------------------------------------------------------------------------------
1 | .profileBtn {
2 | margin: 0 35px 0 10px !important;
3 |
4 | @media screen and (max-width:1024px) {
5 | margin: 0 25px 0 10px !important;
6 | }
7 |
8 | @media screen and (max-width:600px) {
9 | margin: 0 15px 0 10px !important;
10 | }
11 | }
12 |
13 | .feature-topbar {
14 | position: sticky;
15 | top: 0;
16 | z-index: 15;
17 | background: linear-gradient(90deg, #001138 0%, #001E66 100%);
18 |
19 |
20 | .text-linear-gradient {
21 | background: linear-gradient(90deg, #FFFFFF 0%, #3772FF 100%);
22 | -webkit-background-clip: text;
23 | -webkit-text-fill-color: transparent;
24 | background-clip: text;
25 |
26 |
27 | }
28 |
29 | .border-blue {
30 | border-radius: 9px;
31 | border: 1px solid rgb(236, 240, 242, 0.5);
32 |
33 | }
34 |
35 | .purple-btn {
36 | background-color: #8D70F8;
37 | border-radius: 9px;
38 |
39 | &:hover {
40 | background-color: #714BFF;
41 | }
42 |
43 | }
44 |
45 | .green-btn {
46 | background-color: #B3F143;
47 | border-radius: 9px;
48 |
49 | &:hover {
50 | background-color: #90DE03;
51 | }
52 |
53 | }
54 | }
55 |
56 | .top-header{
57 | position: relative !important;
58 | z-index: 0 !important;
59 | }
60 |
61 | .topbar-links {
62 | .v-btn {
63 | &:hover {
64 | background-color: rgba(var(--v-theme-primary));
65 | }
66 | }
67 | }
68 |
69 | .topbar-links {
70 | a {
71 | text-decoration: none;
72 | color: rgba(var(--v-theme-surface));
73 |
74 | &:hover {
75 | color: rgba(var(--v-theme-primary)) !important;
76 | }
77 | }
78 | }
--------------------------------------------------------------------------------
/package/src/scss/pages/_auth.scss:
--------------------------------------------------------------------------------
1 | .authentication{
2 | &::before{
3 | content: "";
4 | position: absolute;
5 | height: 100%;
6 | width: 100%;
7 | opacity: 0.3;
8 | left: 0;
9 | top: 0;
10 | bottom: 0;
11 | background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% / 400% 400%;
12 | }
13 | }
--------------------------------------------------------------------------------
/package/src/scss/pages/_dashboards.scss:
--------------------------------------------------------------------------------
1 | .month-table {
2 | &.custom-px-0 {
3 | thead {
4 | tr {
5 | th:first-child {
6 | padding-left: 0 !important;
7 | }
8 | th:last-child {
9 | padding-right: 0 !important;
10 | }
11 | }
12 | }
13 | tr.month-item {
14 | td:first-child {
15 | padding-left: 0 !important;
16 | }
17 | td:last-child {
18 | padding-right: 0 !important;
19 | }
20 | }
21 | }
22 | tr.month-item {
23 | td {
24 | padding-top: 16px !important;
25 | padding-bottom: 16px !important;
26 | }
27 | &:hover {
28 | background: transparent !important;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/package/src/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 | @import 'vuetify/styles/main.sass';
3 | @import './override';
4 | @import './layout/container';
5 | @import './layout/sidebar';
6 | @import './layout/topbar';
7 | @import './components/VButtons';
8 | @import './components/VCard';
9 | @import './components/VInput';
10 | @import './components/VNavigationDrawer';
11 | @import './components/VShadow';
12 | @import './components/VTextField';
13 | @import './pages/dashboards';
14 | @import './pages/auth';
15 | @import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
--------------------------------------------------------------------------------
/package/src/theme/LightTheme.ts:
--------------------------------------------------------------------------------
1 | import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
2 |
3 | const BlueTheme: ThemeTypes = {
4 | name: 'BlueTheme',
5 | dark: false,
6 | variables: {
7 | 'border-color': '#eeeeee',
8 | 'carousel-control-size': 10
9 | },
10 | colors: {
11 | primary: '#5D87FF',
12 | secondary: '#49BEFF',
13 | info: '#539BFF',
14 | success: '#13DEB9',
15 | accent: '#FFAB91',
16 | warning: '#FFAE1F',
17 | error: '#FA896B',
18 | muted:'#5a6a85',
19 | lightprimary: '#ECF2FF',
20 | lightsecondary: '#E8F7FF',
21 | lightsuccess: '#E6FFFA',
22 | lighterror: '#FDEDE8',
23 | lightwarning: '#FEF5E5',
24 | textPrimary: '#2A3547',
25 | textSecondary: '#2A3547',
26 | borderColor: '#e5eaef',
27 | inputBorder: '#000',
28 | containerBg: '#ffffff',
29 | hoverColor: '#f6f9fc',
30 | surface: '#fff',
31 | 'on-surface-variant': '#fff',
32 | grey100: '#F2F6FA',
33 | }
34 | };
35 | export { BlueTheme};
36 |
--------------------------------------------------------------------------------
/package/src/types/dashboard/index.ts:
--------------------------------------------------------------------------------
1 | /*Recent Transaction*/
2 | type recentTrans = {
3 | title: string;
4 | subtitle: string;
5 | textcolor: string;
6 | boldtext: boolean;
7 | line: boolean;
8 | link: string;
9 | url: string;
10 | };
11 |
12 | /*product performance*/
13 | type productPerformanceType = {
14 | id: number;
15 | name: string;
16 | post: string;
17 | pname: string;
18 | status: string;
19 | statuscolor: string;
20 | budget: string;
21 | };
22 |
23 | /*Products card types*/
24 | type productsCards = {
25 | title: string;
26 | link: string;
27 | photo: string;
28 | salesPrice: number;
29 | price: number;
30 | rating: number;
31 | };
32 |
33 | export type { recentTrans, productPerformanceType, productsCards }
--------------------------------------------------------------------------------
/package/src/types/themeTypes/ThemeType.ts:
--------------------------------------------------------------------------------
1 | export type ThemeTypes = {
2 | name: string;
3 | dark: boolean;
4 | variables?: object;
5 | colors: {
6 | primary?: string;
7 | secondary?: string;
8 | info?: string;
9 | success?: string;
10 | accent?: string;
11 | warning?: string;
12 | error?: string;
13 | lightprimary?: string;
14 | lightsecondary?: string;
15 | lightsuccess?: string;
16 | lighterror?: string;
17 | lightinfo?: string;
18 | lightwarning?: string;
19 | textPrimary?: string;
20 | textSecondary?: string;
21 | borderColor?: string;
22 | hoverColor?: string;
23 | inputBorder?: string;
24 | containerBg?: string;
25 | surface?: string;
26 | 'on-surface-variant'?: string;
27 | grey100?: string;
28 | muted?:string;
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/package/src/views/auth/Login.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 | Your Social Campaigns
17 |
19 | New to Modernize?
20 |
22 | Create an account
23 |
24 |
25 |
26 |
27 |
28 |
29 |
31 |
--------------------------------------------------------------------------------
/package/src/views/auth/Register.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 | Your Social Campaigns
16 |
18 | Already have an Account?
19 |
21 | Sign In
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
--------------------------------------------------------------------------------
/package/src/views/components/Shadow.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/src/views/components/Typography.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/src/views/dashboard/index.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
18 |
19 |
20 |
21 |
23 |
24 |
26 |
27 |
28 |
29 |
31 |
32 |
33 |
35 |
36 |
37 |
39 |
40 |
41 |
42 | Design and Developed by AdminMart.com
43 |
44 |
45 |
--------------------------------------------------------------------------------
/package/src/views/pages/Error404.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Opps!!!
6 |
This page you are looking for could not be found.
7 |
Go Back to Home
8 |
9 |
11 |
--------------------------------------------------------------------------------
/package/src/views/pages/Icons.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/src/views/pages/SamplePage.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Alerts.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Buttons.vue:
--------------------------------------------------------------------------------
1 |
18 |
19 | // ===============================|| Ui Buttons ||=============================== //
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 |
52 |
54 |
55 |
56 |
57 |
58 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Cards.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/package/src/views/ui-components/Tables.vue:
--------------------------------------------------------------------------------
1 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | Name
56 | Calories
57 |
58 |
59 |
60 |
61 | {{ item.name }}
62 | {{ item.calories }}
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | Name
76 | Calories
77 |
78 |
79 |
80 |
81 | {{ item.name }}
82 | {{ item.calories }}
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | Name
95 | Calories
96 |
97 |
98 |
99 |
100 | {{ item.name }}
101 | {{ item.calories }}
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.web.json",
3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4 | "compilerOptions": {
5 | "preserveValueImports": false,
6 | "importsNotUsedAsValues": "remove",
7 | "verbatimModuleSyntax": true,
8 | "baseUrl": ".",
9 | "paths": {
10 | "@/*": ["./src/*"]
11 | },
12 | "allowJs": true
13 | },
14 | "references": [
15 | {
16 | "path": "./tsconfig.vite-config.json"
17 | }
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/package/tsconfig.vite-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.node.json",
3 | "include": ["vite.config.*"],
4 | "compilerOptions": {
5 | "composite": true,
6 | "allowJs": true,
7 | "types": ["node"]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/package/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from "url";
2 | import { defineConfig } from "vite";
3 | import vue from "@vitejs/plugin-vue";
4 | import vuetify from "vite-plugin-vuetify";
5 |
6 |
7 | // https://vitejs.dev/config/
8 | export default defineConfig({
9 | plugins: [
10 | vue(),
11 | vuetify({
12 | autoImport: true,
13 | //styles: "expose",
14 | }),
15 | ],
16 | resolve: {
17 | alias: {
18 | "@": fileURLToPath(new URL("./src", import.meta.url)),
19 | },
20 | },
21 | css: {
22 | preprocessorOptions: {
23 | scss: {},
24 | },
25 | },
26 | optimizeDeps: {
27 | exclude: ['vuetify'],
28 | entries: [
29 | './src/**/*.vue',
30 | ],
31 | },
32 | });
33 |
--------------------------------------------------------------------------------
4 | 
115 | 
118 | 
175 | 
180 | 
185 | 
210 | 
215 | 
220 | 
72 | 
155 | 
4 |
5 | # Chekcout the live link : https://modernize-vue3-free.netlify.app/ 
14 | 
14 | 
5 |