├── README.md
├── discount-code.html
├── docs.html
├── hire-us.html
├── landingpage
├── index.html
└── style.css
└── package
├── .gitignore
├── .npmrc
├── README.md
├── app.vue
├── components
├── auth
│ ├── LoginForm.vue
│ └── RegisterForm.vue
├── dashboard
│ ├── MonthlyEarnings.vue
│ ├── ProductCards.vue
│ ├── ProductPerformance.vue
│ ├── RecentTransaction.vue
│ ├── SalesOverview.vue
│ └── YearlyBreakup.vue
├── layout
│ └── full
│ │ ├── Main.vue
│ │ ├── Topbar.vue
│ │ ├── logo
│ │ ├── Logo.vue
│ │ └── LogoDark.vue
│ │ ├── vertical-header
│ │ ├── NotificationDD.vue
│ │ └── ProfileDD.vue
│ │ └── vertical-sidebar
│ │ ├── Dropdown
│ │ └── index.vue
│ │ ├── ExtraBox
│ │ └── index.vue
│ │ ├── Icon.vue
│ │ ├── NavCollapse
│ │ └── index.vue
│ │ ├── NavGroup
│ │ └── index.vue
│ │ ├── NavItem
│ │ └── index.vue
│ │ └── sidebarItem.ts
├── 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
├── error.vue
├── layouts
├── blank.vue
└── default.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
├── Icons.vue
├── Sample-Page.vue
├── auth
│ ├── Login.vue
│ └── Register.vue
├── index.vue
├── ui-components
│ ├── Alerts.vue
│ ├── Buttons.vue
│ ├── Cards.vue
│ └── Tables.vue
└── ui
│ ├── Shadow.vue
│ └── Typography.vue
├── plugins
└── vuetify.ts
├── public
├── favicon.ico
└── images
│ ├── background
│ ├── errorimg.svg
│ └── rocket.png
│ ├── blog
│ ├── blog-img1.jpg
│ └── blog-img4.jpg
│ ├── 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
├── 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
├── tsconfig.json
└── types
├── dashboard
└── index.ts
└── themeTypes
└── ThemeType.ts
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 | Download most useful and comprehensive 🚀 Free NuxtJs admin template built for developers
12 |
13 | [](https://adminmart.com/product/modernize-free-nuxtjs-admin-dashboard/?ref=56)
14 |
15 |
16 | ## 👋 Introduction
17 |
18 | **Modernize Free NuxtJs Admin Dashboard Template** is a modern, fully responsive **Nuxt dashboard template** built with **NuxtJs**, **Vuetify** and **Vite**. It offers a clean, minimal design that follows Material Design principles, making it ideal for building scalable and high-performance **admin panels**, **SaaS dashboards**, and **internal tools**.
19 |
20 | Designed for speed and scalability, **Modernize Free (Nuxt.js Edition)** seamlessly blends the power of Nuxt.js' versatile framework and **Vuetify’s stunning UI components**. This dynamic combination empowers developers to craft professional-grade dashboards with ease and efficiency.
21 |
22 | Fully open-source and built with modern web technologies, **Modernize Free Nuxt Js Admin Template** offers top-tier performance, a smooth development experience, and excellent SEO support. Whether you're building an internal tool, admin panel, or business dashboard, it provides a solid, production-ready foundation to get started quickly and scale effortlessly.
23 |
24 |
25 |
26 | ### 🔑 Key Features
27 |
28 | - **Responsive Design**
29 | Delivers a seamless experience across all screen sizes with **Vuetify's** responsive layout system and adaptive components.
30 |
31 | - **Nuxt.js Framework**
32 | Leveraging the full power of **Nuxt.js**, including built-in routing, state management with Vuex, and strong TypeScript support, to deliver scalable and maintainable applications.
33 |
34 | - **Vuetify Components**
35 | Built entirely with **Vuetify**, offering a rich set of pre-styled, accessible UI components that follow the Material Design guidelines—ideal for fast, consistent interface development.
36 |
37 | - **Chart.js Integration**
38 | Comes with interactive and customizable charts powered by **Chart.js**, perfect for visualizing analytics and data dashboards (or any other visualization library you prefer).
39 |
40 | - **TypeScript Support**
41 | Fully typed codebase ensures reliability, better developer tooling, and maintainable code structure.
42 |
43 | - **Developer Friendly**
44 | Modular folder structure, clean code, and minimal setup make it easy to extend, customize, and scale for real-world applications.
45 | ---
46 |
47 |
48 | ## 🛠️ Notable Libraries and Tools
49 |
50 | | **Library / Tool** | **Description** |
51 | |------------------------|---------------------------------------------------------------------------------|
52 | | **Nuxt.js** | A powerful framework built on Vue.js, designed for building scalable, server-side rendered (SSR) web applications. |
53 | | **Vuetify** | A Material Design component library for Vue.js, offering pre-built, responsive UI components for rapid interface development. |
54 | | **Chart.js** | A modern charting library for building interactive and customizable charts, perfect for dashboards and data visualizations. |
55 | | **TypeScript** | A strongly typed programming language that builds on JavaScript, offering better tooling, code quality, and maintainability. |
56 |
57 | ---
58 | ## 💾 Installation Guide
59 |
60 | Welcome to the **Modernize Free NuxtJs Template**! 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.
61 |
62 | ### 📝 Steps to Install
63 |
64 | #### 1. **Clone the Repository**
65 |
66 | The easiest way to get started is by cloning the repository or download the zip file. You can do this with the following command:
67 |
68 | ```bash
69 | git clone https://github.com/adminmart/Modernize-nuxtjs-free.git
70 | ```
71 |
72 | #### 2. **Install Dependencies**
73 |
74 | Install the relative Dependencies of the template. You can do this with the following command:
75 |
76 | ```bash
77 | npm install
78 | ```
79 |
80 | #### 3. **Start the Development Server**
81 |
82 | Once the dependencies are installed, you can start a local development server to preview the template:
83 |
84 | ```bash
85 | npm run dev
86 |
87 | ```
88 |
89 | ---
90 |
91 | ## 📝 Documentation
92 |
93 | Welcome to the **Modernize Free NuxtJs Template** 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.
94 |
95 | 👉 **[Click here to read the full documentation](https://adminmart.github.io/free-documentation/nuxt/modernize/index.html?ref=56)**
96 |
97 | ---
98 |
99 | ## 💎 Pro Version
100 |
101 | The Pro Version of the **Modernize NuxtJs Dashboard Template** 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.
102 |
103 |
111 |
112 | [](https://adminmart.com/product/modernize-nuxt-js-admin-dashboard/?ref=56)
113 |
114 | ---
115 |
116 | ## ⚖️ Free vs Pro Version Comparison
117 |
118 | The **Free Version** of the **Modernize NuxtJs Dashboard Template** 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.
119 |
120 |
121 | #### Check out the comparison below to see the key differences between the two versions:
122 |
123 | | **Feature** | **Free Version** | **Pro Version** |
124 | |-----------------------------------|----------------------------------------|-----------------------------------------------------|
125 | | **Demo** | [](https://modernize-nuxtjs-free.netlify.app/?ref=56) | [](https://modernize-nuxt.adminmart.com/dashboards/modern?ref=56) |
126 | | **Download** | [](https://adminmart.com/product/modernize-free-nuxtjs-admin-dashboard/?ref=56) | [](https://adminmart.com/product/modernize-nuxt-js-admin-dashboard/#product-demo-section?ref=56) |
127 | | **Responsive Design** | ✅ Yes | ✅ Yes |
128 | | **Pre-designed Pages** | ✅ Basic Pages | ✅ Advanced Pages (more layouts & options) |
129 | | **Widgets** | ✅ Basic Widgets | ✅ Advanced Widgets (e.g., weather, charts, maps) |
130 | | **Themes** | ✅ Default Theme | ✅ Multiple Themes, Custom Color Skins, and Dark Modes |
131 | | **Support** | ✅ Community Support | ✅ Priority Support with Direct Contact |
132 | | **Additional Components** | ❌ Limited | ✅ Additional Components (Forms, Buttons, More UI Elements) |
133 | | **Advanced Data Visualization** | ❌ Basic Charts | ✅ Advanced Data Visualizations (graphs, complex charts) |
134 | | **Multi-Language Support** | ❌ Not available | ✅ Built-in support for multiple languages |
135 | | **User Permissions & Roles** | ❌ No | ✅ User roles and permissions management |
136 | | **Real-time Notifications** | ❌ Not available | ✅ Real-time notifications for alerts & updates |
137 | | **Advanced Analytics & Reporting**| ❌ Basic reports | ✅ Advanced analytics with custom reports and filters|
138 |
139 |
140 | ---
141 |
142 | ## 🗂️ Other versions
143 |
144 |
145 |
146 |
147 |
148 |
149 | Bootstrap
150 |
151 |
152 |
153 | Next
154 |
155 |
156 |
157 | Angular
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 | React
185 |
186 |
187 |
188 | Vue
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 | ---
209 |
210 |
211 | ## 🤝 Contributing
212 |
213 | We welcome contributions from the community to help improve the **Modernize NuxtJs Dashboard Template**. Whether it’s fixing bugs, adding new features, improving documentation, or sharing ideas — your input is appreciated!
214 |
215 | ### 🛠️ How to Contribute
216 |
217 | Follow these simple steps to start contributing:
218 |
219 | 1. **Fork the Repository**
220 | Click the **Fork** button on the top-right corner of this repo to create your own copy.
221 |
222 | 2. **Clone Your Fork**
223 | Use the command below to clone your forked repository:
224 | ```bash
225 | git clone https://github.com/adminmart/Modernize-nuxtjs-free.git
226 | 3. **Create a New Branch**
227 | Create a new branch to work on your feature or fix. This keeps your changes separate from the main branch:
228 | ```bash
229 | git checkout -b feature/your-feature-name
230 | 4. **Commit and Push Changes**
231 | After making your changes, commit them with a meaningful message and push your branch to your fork:
232 | ```bash
233 | git commit -am "Add: Description of changes made"
234 | git push origin feature/your-feature-name
235 | ---
236 |
237 | ## 🧭 Useful Links
238 | - Bootstrap Templates & Themes from AdminMart
239 | - React Templates from AdminMart
240 | - NextJs Templates from AdminMart
241 | - Vue Templates from AdminMart
242 | - Tailwind Templates from AdminMart
243 | - Angular Templates from AdminMart
244 | - Material UI Templates from AdminMart
245 | - Vuetify Themes from AdminMart
246 | - Nuxt Js Templates from AdminMart
247 |
248 | ---
249 |
250 | ## 🌐 We are social
251 |
252 | [](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/)
253 |
--------------------------------------------------------------------------------
/discount-code.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Discount Code
8 |
9 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
30% OFF
95 |
On Premium
96 |
Product
97 |
Use Coupon code : upgrade30
98 |
99 |
100 |
Get Now
101 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/docs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Modernize Free NuxtJs Admin Dashboard | Docs
5 |
9 |
10 |
11 |
12 | Modernize Free NuxtJs Admin Dashboard
13 | https://adminmart.github.io/free-documentation/nuxt/modernize/index.html
17 |
18 |
19 |
--------------------------------------------------------------------------------
/hire-us.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Modernize Free NuxtJs Admin Dashboard
5 |
9 |
10 |
11 |
12 | Modernize Free NuxtJs Admin Dashboard
13 | https://adminmart.com/hire-us/
16 |
17 |
18 |
--------------------------------------------------------------------------------
/landingpage/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Modernize Free Nuxtjs Admin Template by Adminmart
8 |
9 |
10 |
11 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
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 |
70 |
73 |
74 |
81 |
82 |
83 |
84 |
85 |
86 | 1 Basic Dashboard
87 |
88 |
89 | 7+ Pages Template
90 |
91 |
92 | 5+ UI Components
93 |
94 |
95 | Vuetify 3
96 |
97 |
98 | NuxtJs 3
99 |
100 |
101 | Tabler Icons
102 |
103 |
104 |
105 | No Support
106 | Provided
107 |
108 |
109 |
110 |
111 |
112 |
113 | Google Fonts
114 |
115 |
116 | SCSS Base CSS
117 |
118 |
119 | Code splitting
120 |
121 |
122 | Organized Code Structure
123 |
124 |
125 | Fully Responsive Pages
126 |
127 |
128 | No
129 | Documentation
130 |
131 |
132 | Backlink
133 | Required
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | Pro Version
150 |
151 |
152 |
153 |
154 |
157 |
158 |
165 |
166 |
167 |
168 |
169 | 2+ Stunning Dashboards
170 |
171 |
172 | 65+ Page Templates
173 |
174 |
175 | 45+ UI Components
176 |
177 |
178 | 15+ Integrated Plugins
179 |
180 |
181 | Vuetify 3 + Nuxt 3
182 |
183 |
184 | NuxtJs Landing Page
185 |
186 |
187 | 1 Year Premium Support
188 |
189 |
190 |
191 | 3400+ Font Icons
192 |
193 |
194 | Lots of Charts Added
195 |
196 |
197 | Slick Carousel Added
198 |
199 |
200 | Fully Responsive Pages
201 |
202 |
203 | & lots more..
204 |
205 |
206 |
207 |
208 |
209 |
210 | 4+ Unique Demos
211 |
212 |
213 | Axios - Mock API Included
214 |
215 |
216 | 7+ Ready to Use App
217 |
218 |
219 | i18 Vue Included
220 |
221 |
222 | Dashboard Figma Files
223 |
224 |
225 | Documentation Provided
226 |
227 |
228 | Lots of Widgets
229 |
230 |
231 | Tons of Table Example
232 |
233 |
234 | Variety of Forms Included
235 |
236 |
237 | SCSS Base CSS
238 |
239 |
240 | Easy to Customize
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 | All Rights Reserved by Modernize NuxtJs Admin. Designed and Developed
255 | by
256 | adminmart.com
257 |
258 |
259 |
260 |
261 |
264 |
265 |
266 |
--------------------------------------------------------------------------------
/landingpage/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
2 |
3 | :root {
4 | --bs-font-sans-serif: "Plus Jakarta Sans",
5 | sans-serif;
6 | --bs-primary: #5D87FF;
7 | --bs-secondary: #6c757d;
8 | --bs-danger: #FA896B;
9 | --bs-body-font-size: 0.875rem;
10 | --bs-body-font-weight: 400;
11 | --bs-body-line-height: 1.5;
12 | --bs-body-color: #5A6A85;
13 | --bs-body-bg: #fff;
14 | --bs-border-color: #ebf1f6;
15 | --bs-heading-color: #2A3547;
16 | --bs-border-radius: 7px;
17 | --bs-gutter-x: 24px;
18 | --bs-btn-font-size: 0.875rem;
19 | --bs-card-spacer-y: 30px;
20 | --bs-card-spacer-x: 30px;
21 | --bs-card-border-width: 0px;
22 | --bs-success-rgb: 19,222,185;
23 | --bs-primary-rgb: 93,135,255;
24 | --bs-light-rgb: 246,249,252;
25 | --bs-dark-rgb: 42,53,71;
26 | }
27 |
28 | .btn {
29 | --bs-btn-padding-x: 16px;
30 | --bs-btn-padding-y: 7px;
31 | --bs-btn-font-size: 0.875rem;
32 | }
33 |
34 | .btn-primary {
35 | --bs-btn-bg: var(--bs-primary);
36 | --bs-btn-border-color: var(--bs-primary);
37 | --bs-btn-hover-bg: var(--bs-primary);
38 | --bs-btn-hover-border-color: var(--bs-primary);
39 | --bs-btn-focus-shadow-rgb: 49,132,253;
40 | --bs-btn-active-bg: var(--bs-primary);
41 | --bs-btn-active-border-color: var(--bs-primary);
42 | --bs-btn-disabled-bg: var(--bs-primary);
43 | --bs-btn-disabled-border-color: var(--bs-primary);
44 | }
45 |
46 | .btn-secondary {
47 | --bs-btn-bg: var(--bs-secondary);
48 | --bs-btn-border-color: var(--bs-secondary);
49 | --bs-btn-hover-bg: var(--bs-secondary);
50 | --bs-btn-hover-border-color: var(--bs-secondary);
51 | --bs-btn-focus-shadow-rgb: 49,132,253;
52 | --bs-btn-active-bg: var(--bs-secondary);
53 | --bs-btn-active-border-color: var(--bs-secondary);
54 | --bs-btn-disabled-bg: var(--bs-secondary);
55 | --bs-btn-disabled-border-color: var(--bs-secondary);
56 | }
57 |
58 | .btn-danger {
59 | --bs-btn-bg: var(--bs-danger);
60 | --bs-btn-border-color: var(--bs-danger);
61 | --bs-btn-hover-bg: var(--bs-danger);
62 | --bs-btn-hover-border-color: var(--bs-danger);
63 | --bs-btn-focus-shadow-rgb: 49,132,253;
64 | --bs-btn-active-bg: var(--bs-danger);
65 | --bs-btn-active-border-color: var(--bs-danger);
66 | --bs-btn-disabled-bg: var(--bs-danger);
67 | --bs-btn-disabled-border-color: var(--bs-danger);
68 | }
69 |
70 | .btn-outline-primary {
71 | --bs-btn-color: var(--bs-primary);
72 | --bs-btn-border-color: var(--bs-primary);
73 | --bs-btn-hover-color: #fff;
74 | --bs-btn-hover-bg: var(--bs-primary);
75 | --bs-btn-hover-border-color: var(--bs-primary);
76 | --bs-btn-focus-shadow-rgb: 13,110,253;
77 | --bs-btn-active-color: #fff;
78 | --bs-btn-active-bg: var(--bs-primary);
79 | --bs-btn-active-border-color: var(--bs-primary);
80 | --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
81 | --bs-btn-disabled-color: var(--bs-primary);
82 | --bs-btn-disabled-bg: transparent;
83 | --bs-btn-disabled-border-color: var(--bs-primary);
84 | }
85 |
86 | /* background */
87 | .bg-light {
88 | background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
89 | }
90 |
91 | /* text colors */
92 | .text-success {
93 | color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
94 | }
95 |
96 | .text-primary {
97 | color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
98 | }
99 |
100 | .text-dark {
101 | color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
102 | }
103 |
104 | .text-muted {
105 | color: #5a6a85!important;
106 | }
107 |
108 | /* card */
109 | .card {
110 | --bs-card-spacer-y: 30px;
111 | --bs-card-spacer-x: 30px;
112 | --bs-card-title-color: #2A3547;
113 | --bs-card-subtitle-color: #2A3547;
114 | --bs-card-border-width: 0px;
115 | --bs-card-box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
116 | --bs-card-inner-border-radius: 7px;
117 | }
118 |
119 | .container {
120 | max-width: 1150px;
121 | }
122 |
123 | /* custom */
124 | .spacer {
125 | padding: 80px 0;
126 | }
127 |
128 | .pro-demo {
129 | -webkit-box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
130 | box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
131 | }
132 |
133 | .line-h33 {
134 | line-height: 33px;
135 | }
136 |
137 | .icon-circle {
138 | background-color: rgb(var( --bs-dark-rgb));
139 | display: inline-block;
140 | width: 15px;
141 | height: 15px;
142 | border-radius: 100%;
143 | position: relative;
144 | }
145 |
146 | .icon-circle.circle-primary {
147 | background-color: rgb(var( --bs-primary-rgb)) !important;
148 | }
149 |
150 | .icon-circle.circle-muted {
151 | background-color: var(--bs-body-color) !important;
152 | opacity: 0.8;
153 | }
154 |
155 | .icon-circle:before {
156 | content: '';
157 | position: absolute;
158 | left: 0;
159 | right: 0;
160 | width: 5px;
161 | height: 5px;
162 | border-radius: 100%;
163 | background-color: #fff;
164 | display: block;
165 | margin: 0 auto;
166 | top: 5px;
167 | }
--------------------------------------------------------------------------------
/package/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 |
--------------------------------------------------------------------------------
/package/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 |
--------------------------------------------------------------------------------
/package/README.md:
--------------------------------------------------------------------------------
1 | # Modernize-nuxtjs-free
2 | Free Nuxt 3 Admin Template with vuetify 3 + Typescript
3 |
4 | # Live Demo
5 |
6 |
7 | # Nuxt 3 Starter
8 |
9 | > 💚 A Better Nuxt 3 starter template
10 |
11 | ## Use the Template
12 |
13 | ### Clone to local
14 |
15 | ```bash
16 |
17 | $> 💿 Install dependencies with `npm install` or `yarn install`
18 | $>
19 | $> 🚀 Start development server with `npm run dev` or `yarn dev`
20 | ```
21 |
22 | ## Setup
23 |
24 | ### Installation
25 |
26 | Make sure to install the dependencies
27 |
28 | ```bash
29 | yarn install
30 | ```
31 |
32 | ### Development
33 |
34 | Start the development server on http://localhost:3088
35 |
36 | ```bash
37 | yarn dev
38 | ```
39 |
40 | ### Production
41 |
42 | Build the application for production:
43 |
44 | ```bash
45 | yarn build
46 | ```
47 |
48 |
49 |
--------------------------------------------------------------------------------
/package/app.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/package/components/auth/LoginForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Username
10 |
11 |
12 |
13 | Password
14 |
15 |
16 |
17 |
18 |
19 | Remeber this Device
20 |
21 |
22 | Forgot
24 | Password ?
25 |
26 |
27 |
28 |
29 | Sign in
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/package/components/auth/RegisterForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | Name
10 |
11 |
12 |
13 | Email Address
14 |
15 |
16 |
17 | Password
18 |
19 |
20 |
21 | Sign up
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/components/dashboard/MonthlyEarnings.vue:
--------------------------------------------------------------------------------
1 |
56 |
57 |
58 |
59 |
60 | Monthly Earnings
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
$6,820
71 |
72 |
73 |
74 |
75 |
+9%
76 |
last year
77 |
78 |
79 |
80 |
81 |
82 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/package/components/dashboard/ProductCards.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Add To Cart
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/package/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 |
28 |
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/components/dashboard/RecentTransaction.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Recent Transactions
10 |
11 |
12 |
13 |
14 | {{ list.title }}
15 |
16 |
17 |
18 |
19 |
20 |
21 | {{ list.subtitle }}
22 | {{ list.subtitle }}
23 |
24 | {{
25 | list.link
26 | }}
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
43 |
--------------------------------------------------------------------------------
/package/components/dashboard/SalesOverview.vue:
--------------------------------------------------------------------------------
1 |
86 |
87 |
88 |
89 |
90 |
Sales Overview
91 |
92 |
99 |
100 |
101 |
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/package/components/dashboard/YearlyBreakup.vue:
--------------------------------------------------------------------------------
1 |
44 |
45 |
46 |
47 |
48 | Yearly Breakup
49 |
50 |
51 |
52 |
53 |
$36,358
54 |
55 |
56 |
57 |
58 |
+9%
59 |
last year
60 |
61 |
62 |
63 |
69 | 2024
70 |
71 |
72 |
78 | 2025
79 |
80 |
81 |
82 |
83 |
84 |
94 |
95 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/package/components/layout/full/Main.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
61 |
62 |
90 |
91 |
--------------------------------------------------------------------------------
/package/components/layout/full/Topbar.vue:
--------------------------------------------------------------------------------
1 |
64 |
65 |
66 |
69 |
89 |
90 |
93 | Checkout Pro Version
94 |
95 |
98 |
99 |
100 |
106 |
107 | Live Preview
108 |
109 |
110 |
111 |
112 |
119 |
122 |
123 | {{ item.title }}
125 |
126 |
127 |
128 |
135 |
136 | Get
137 | Pro
139 |
140 |
141 |
142 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/package/components/layout/full/logo/Logo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/package/components/layout/full/logo/LogoDark.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
15 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-header/NotificationDD.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-header/ProfileDD.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | My Profile
24 |
25 |
26 |
27 |
28 |
29 | My Account
30 |
31 |
32 |
33 |
34 |
35 | My Task
36 |
37 |
38 |
39 | Logout
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-sidebar/Dropdown/index.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/components/layout/full/vertical-sidebar/Dropdown/index.vue
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-sidebar/ExtraBox/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
22 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-sidebar/Icon.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
13 |
14 |
15 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-sidebar/NavCollapse/index.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
22 |
23 |
24 |
25 |
26 |
27 | {{item.title}}
30 |
31 |
37 |
38 |
39 |
40 |
41 |
42 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-sidebar/NavGroup/index.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {{ props.item.header}}
7 |
8 |
--------------------------------------------------------------------------------
/package/components/layout/full/vertical-sidebar/NavItem/index.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
18 |
19 |
20 |
21 |
22 | {{ item.title }}
24 |
25 |
26 |
35 |
36 |
37 |
38 |
39 |
40 |
46 |
47 |
48 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/package/components/shared/CardHeaderFooter.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package/components/shared/UiChildCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | {{ title }}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package/components/shared/UiParentCard.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 | // ===============================|| Ui Parent Card||=============================== //
9 |
10 |
11 |
12 |
13 |
{{ title }}
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package/components/shared/UiTableCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/package/components/shared/UiTextfieldPrimary.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/package/components/shared/WidgetCard.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/package/components/shared/WidgetCardv2.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{ title }}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package/components/style-components/shadow/Shadow.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 | {{ n }}
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/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 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/package/components/style-components/typography/Heading.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
{{ name }}
29 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
{{ name1 }} {{ val1 }}
42 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/package/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/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 |
30 |
31 |
--------------------------------------------------------------------------------
/package/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/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/components/ui-components/button/ColorsButtons.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {{ btn }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/components/ui-components/button/IconColorSizes.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/package/components/ui-components/button/OutlinedButtons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | primary
5 | secondary
6 |
7 | Disabled
8 |
9 | link
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/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/components/ui-components/button/TextButtons.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {{ btn }}
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/components/ui-components/cards/CardsContentWrap.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
40 |
41 |
47 |
48 |
49 |
50 |
51 | Messages
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | Today
62 |
63 |
64 |
70 |
71 |
72 | {{ message.from }} @{{ message.time }}
73 |
74 |
{{ message.message }}
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/package/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/components/ui-components/cards/CardsProps.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
--------------------------------------------------------------------------------
/package/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/components/ui-components/cards/CardsTwitter.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
17 |
18 |
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 |
31 |
32 |
33 | Evan You
34 |
35 | Vue Creator
36 |
37 |
38 |
39 |
40 | 256
41 | ·
42 |
43 | 45
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/package/components/ui-components/cards/CardsWeather.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
37 |
38 | Extreme Weather Alert
39 |
40 |
41 |
42 |
43 |
44 |
48 | 64°F
49 |
50 |
51 |
52 |
57 |
58 |
59 |
60 |
61 |
62 |
66 | 123 km/h
67 |
68 |
69 |
73 | 48%
74 |
75 |
76 |
77 |
78 |
79 |
80 |
92 |
93 |
94 |
95 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | {{ !expand ? 'Full Report' : 'Hide Report' }}
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/package/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 '/images/products/s4.jpg';
104 | import proimg2 from '/images/products/s5.jpg';
105 | import proimg3 from '/images/products/s7.jpg';
106 | import proimg4 from '/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/error.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
Opps!!!
18 |
This page you are looking for could not be found.
19 |
Go Back to Home
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package/layouts/blank.vue:
--------------------------------------------------------------------------------
1 | // ===============================|| Blank Layout ||=============================== //
2 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/package/layouts/default.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/package/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 | ssr: false,
4 |
5 | typescript: {
6 | shim: false
7 | },
8 |
9 | build: {
10 | transpile: ["vuetify"],
11 | },
12 |
13 | vite: {
14 | define: {
15 | "process.env.DEBUG": false,
16 | },
17 | },
18 |
19 | nitro: {
20 | serveStatic: true,
21 | },
22 |
23 | devServerHandlers: [],
24 |
25 | hooks: {
26 | },
27 |
28 | compatibilityDate: "2025-04-15",
29 | })
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "modernize-nuxtjs-free",
3 | "version": "2.0.0",
4 | "type": "module",
5 | "private": true,
6 | "scripts": {
7 | "build": "nuxt build",
8 | "dev": "nuxt dev",
9 | "generate": "nuxt generate",
10 | "preview": "nuxt preview",
11 | "postinstall": "nuxt prepare"
12 | },
13 | "devDependencies": {
14 | "nuxt": "3.16.2"
15 | },
16 | "dependencies": {
17 | "@mdi/font": "7.4.47",
18 | "@nuxt/vite-builder": "3.16.2",
19 | "apexcharts": "4.5.0",
20 | "@iconify/vue": "^4.1.1",
21 | "sass": "1.70.0",
22 | "vue": "3.5.13",
23 | "vue-tabler-icons": "2.21.0",
24 | "vue3-apexcharts": "1.5.2",
25 | "vue3-perfect-scrollbar": "1.6.1",
26 | "vuetify": "3.7.18"
27 | },
28 | "overrides": {
29 | "nth-check": "2.1.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/package/pages/Icons.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package/pages/Sample-Page.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package/pages/auth/Login.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Your Social Campaigns
18 |
19 |
20 | New to Modernize?
21 |
23 | Create an account
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/package/pages/auth/Register.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Your Social Campaigns
18 |
19 |
20 | Already have an Account?
21 |
23 | Sign In
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/package/pages/index.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Design and Developed by AdminMart.com
43 |
44 |
45 |
--------------------------------------------------------------------------------
/package/pages/ui-components/Alerts.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/package/pages/ui-components/Buttons.vue:
--------------------------------------------------------------------------------
1 |
18 |
19 | // ===============================|| Ui Buttons ||=============================== //
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/package/pages/ui-components/Cards.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/package/pages/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/pages/ui/Shadow.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/pages/ui/Typography.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 |
2 | import { createVuetify } from "vuetify";
3 | import "@mdi/font/css/materialdesignicons.css";
4 | import * as components from "vuetify/components";
5 | import * as directives from "vuetify/directives";
6 | import PerfectScrollbar from 'vue3-perfect-scrollbar';
7 | import VueApexCharts from 'vue3-apexcharts';
8 | import VueTablerIcons from 'vue-tabler-icons';
9 | import '@/scss/style.scss';
10 | import {
11 | PurpleTheme,
12 | } from "@/theme/LightTheme";
13 | export default defineNuxtPlugin((nuxtApp) => {
14 | const vuetify = createVuetify({
15 | components,
16 | directives,
17 | theme: {
18 | defaultTheme: "PurpleTheme",
19 | themes: {
20 | PurpleTheme,
21 | },
22 | },
23 | });
24 | nuxtApp.vueApp.use(vuetify);
25 | nuxtApp.vueApp.use(PerfectScrollbar);
26 | nuxtApp.vueApp.use(VueApexCharts);
27 | nuxtApp.vueApp.use(VueTablerIcons);
28 | });
29 |
30 |
--------------------------------------------------------------------------------
/package/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/favicon.ico
--------------------------------------------------------------------------------
/package/public/images/background/errorimg.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/package/public/images/background/rocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/background/rocket.png
--------------------------------------------------------------------------------
/package/public/images/blog/blog-img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/blog/blog-img1.jpg
--------------------------------------------------------------------------------
/package/public/images/blog/blog-img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/blog/blog-img4.jpg
--------------------------------------------------------------------------------
/package/public/images/logos/logo-adminmart.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/package/public/images/logos/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/package/public/images/logos/logolight.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/package/public/images/products/s11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/products/s11.jpg
--------------------------------------------------------------------------------
/package/public/images/products/s4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/products/s4.jpg
--------------------------------------------------------------------------------
/package/public/images/products/s5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/products/s5.jpg
--------------------------------------------------------------------------------
/package/public/images/products/s7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/products/s7.jpg
--------------------------------------------------------------------------------
/package/public/images/technology/angular-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package/public/images/technology/bt-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package/public/images/technology/next-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/package/public/images/technology/nuxt-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/package/public/images/technology/react-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/package/public/images/technology/tailwind-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package/public/images/technology/vue-cat-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package/public/images/users/avatar-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adminmart/Modernize-nuxtjs-free/84d8797979f9480e210d3098bf0bfb6cb13286ab/package/public/images/users/avatar-1.jpg
--------------------------------------------------------------------------------
/package/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/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/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/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/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/scss/components/_VNavigationDrawer.scss:
--------------------------------------------------------------------------------
1 | .v-navigation-drawer__scrim.fade-transition-leave-to {
2 | display: none;
3 | }
4 |
--------------------------------------------------------------------------------
/package/scss/components/_VShadow.scss:
--------------------------------------------------------------------------------
1 | .elevation-10 {
2 | box-shadow: $box-shadow !important;
3 | }
--------------------------------------------------------------------------------
/package/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/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/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/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/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/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/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap");
2 | @import './variables';
3 | @import 'vuetify/styles/main.sass';
4 | @import './override';
5 | @import './layout/container';
6 | @import './layout/sidebar';
7 | @import './layout/topbar';
8 | @import './components/VButtons';
9 | @import './components/VCard';
10 | @import './components/VInput';
11 | @import './components/VNavigationDrawer';
12 | @import './components/VShadow';
13 | @import './components/VTextField';
14 | @import './pages/dashboards';
15 | @import './pages/auth';
16 | @import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
--------------------------------------------------------------------------------
/package/theme/LightTheme.ts:
--------------------------------------------------------------------------------
1 | import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
2 |
3 | const PurpleTheme: ThemeTypes = {
4 | name: 'PurpleTheme',
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 | grey200: '#EAEFF4'
34 | }
35 | };
36 | export { PurpleTheme};
37 |
--------------------------------------------------------------------------------
/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // https://nuxt.com/docs/guide/concepts/typescript
3 | "extends": "./.nuxt/tsconfig.json"
4 | }
5 |
--------------------------------------------------------------------------------
/package/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/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 | grey200?: string;
29 | muted?:string;
30 | };
31 | };
32 |
--------------------------------------------------------------------------------