Skip to content

Commit 2d1b6a3

Browse files
app-generatorapp-generator
committed
Added Vuetify Content
1 parent a71afc0 commit 2d1b6a3

File tree

4 files changed

+295
-0
lines changed

4 files changed

+295
-0
lines changed

‎docs/content/what-is/vuetify.mdx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
title : What IS Vuetify
3+
sidebar_label : What IS Vuetify
4+
---
5+
6+
# What IS Vuetify
7+
8+
<SubHeading>Short introduction to WSGI interface implemented by well-known libraries like Flask and Django.</SubHeading>
9+
10+
[Vuetify](https://vuetifyjs.com/) is a popular open-source Vue.js framework for building modern web applications.
11+
It is designed to simplify and streamline the development process by providing a set of pre-designed, reusable UI components and layout elements.
12+
13+
![What IS Vuetify - Tutorial provided by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270630877-a0d15af1-c7e1-4246-ab69-9284cee625b2.jpg)
14+
15+
Vuetify follows the Material Design guidelines, which is a design language developed by Google, to ensure that applications built with it have a visually appealing and consistent user interface.
16+
17+
> Here are some **key features and aspects of Vuetify**
18+
19+
## ✅ **Material Design**
20+
21+
Vuetify adheres to the Material Design principles, offering a visually pleasing and consistent design language that emphasizes clean, intuitive layouts and responsive behavior.
22+
23+
## ✅ **Rich Component Library**
24+
25+
Vuetify provides a comprehensive library of UI components, including buttons, cards, navigation drawers, forms, data tables, dialogs, and more.
26+
27+
These components are designed to be reusable and customizable to fit various application needs.
28+
29+
## ✅ **Responsive Layout System**
30+
31+
Vuetify includes a responsive layout system based on a 12-column grid, making it easy to create adaptive and responsive designs for different screen sizes and devices.
32+
33+
## ✅ **Customization**
34+
35+
Developers can easily customize the appearance and behavior of Vuetify components by overriding default styles and providing custom themes. This flexibility allows for unique and branded designs.
36+
37+
## ✅ **Internationalization (i18n)**
38+
39+
Vuetify includes internationalization support, making it convenient to create multilingual applications with translated content.
40+
41+
## ✅ **Accessibility**
42+
43+
The framework places a strong emphasis on accessibility, ensuring that applications built with Vuetify are usable by individuals with disabilities.
44+
45+
## ✅ **Active Development and Community**
46+
47+
Vuetify is actively maintained and has a strong community of developers contributing to its growth. It benefits from regular updates, bug fixes, and enhancements.
48+
49+
## ✅ **Browser Compatibility**
50+
51+
Vuetify is designed to work across modern web browsers and ensures compatibility with popular browsers to reach a broad audience.
52+
53+
## ✅ **Routing**
54+
55+
While Vuetify focuses primarily on UI components, developers often integrate it with Vue Router for creating single-page applications (SPAs) with routing capabilities.
56+
57+
## ✅ **Form Validation**
58+
59+
Vuetify includes form validation capabilities, allowing developers to validate user input easily and provide feedback to users.
60+
61+
## ✅ **State Management**
62+
63+
Vuetify does not provide a specific state management solution, but it can be easily integrated with Vuex, Vue's official state management library, to manage application data.
64+
65+
## ✅ **Component Theming**
66+
67+
Vuetify components can be themed individually, allowing for precise control over the appearance of each component.
68+
69+
Here's a simple example of how to use a Vuetify component (a button) within a Vue.js component:
70+
71+
```vue
72+
<template>
73+
<v-app>
74+
<v-btn color="primary">Click me</v-btn>
75+
</v-app>
76+
</template>
77+
78+
<script>
79+
export default {
80+
name: 'App',
81+
};
82+
</script>
83+
```
84+
85+
In this example, we're using the `v-btn` component provided by Vuetify to create a button with a primary color.
86+
87+
Vuetify components are typically added to Vue.js templates in this manner, making it easy to create modern and visually appealing user interfaces.
88+
89+
## ✅ In Summary
90+
91+
Vuetify is a powerful and widely used framework for Vue.js that helps developers save time and effort in building web applications with a polished and responsive user interface.
92+
93+
It is suitable for a wide range of projects, from simple websites to complex web applications.
94+
95+
To learn more and get started with Vuetify, you can explore the official documentation and examples on the Vuetify website (https://vuetifyjs.com/).
96+
97+
## ✅ Vuetify Templates
98+
99+
### 👉 [Modernize Free Vuetify](https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=1)
100+
101+
This free Vuejs admin template is developer-friendly, highly customizable, and very easy to use. It allows you to create web apps in no time without any hassle.
102+
103+
- [Modernize Free Vuetify](https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=1) - product page (contains download link)
104+
- More [Admin Templates](https://adminmart.com/templates/free-admin-templates/?ref=1) provided by AdminMart (all free)
105+
106+
Developing a web app from scratch is a nightmare of every developer while getting a free Vuejs template like this is every developer’s dream.
107+
108+
![Modernize Free Vuetify - Free Vue Dashboard by AdminMart](https://github.com/admin-dashboards/vue-dashboard/assets/51854817/2723cbf7-db1f-4dd8-a130-a6180a14f417)
109+
110+
<br />
111+
112+
### 👉 [Vue Dashboard - Vuetify Material](https://www.creative-tim.com/product/vuetify-material-dashboard?AFFILIATE=128200)
113+
114+
Vuetify **Vue Dashboard** is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
115+
116+
- [Vue Dashboard Vuetify Material](https://www.creative-tim.com/product/vuetify-material-dashboard?AFFILIATE=128200) - `product page`
117+
- [Vue Dashboard Vuetify Material](https://demos.creative-tim.com/vuetify-material-dashboard/#/?AFFILIATE=128200) - `LIVE demo`
118+
119+
![Vue Dashboard Vuetify Material - main dashboard screen](https://raw.githubusercontent.com/admin-dashboards/vue-dashboard/master/media/vuetify-material-dashboard-screen.png)
120+
121+
## ✅ Resources
122+
123+
- 👉 Access [AppSeed](https://appseed.us/) and start your next project
124+
- 👉 [Deploy Projects on Aws, Azure and Digital Ocean](https://www.docs.deploypro.dev/) via **DeployPRO**
125+
- 👉 Create an amazing landing page with [Simpllo, an open-source site builder](https://www.simpllo.com/)
126+
- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder

‎docs/glossary.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,11 @@ sidebar_label : Glossary
151151
to improve the efficiency and performance of updating the user interface (UI) of web applications.
152152
The Virtual DOM is not a real, physical representation of the web page's structure but rather a lightweight in-memory representation of the actual Document Object Model (DOM) tree.
153153

154+
**[Vuetify](/content/what-is/vuetify/)**
155+
156+
Vuetify is a popular open-source Vue.js framework for building modern web applications.
157+
It is designed to simplify and streamline the development process by providing a set of pre-designed, reusable UI components and layout elements.
158+
154159
## Misc
155160

156161
**[Getting Started with Django](/technologies/django/getting-started/)**
@@ -167,6 +172,8 @@ sidebar_label : Glossary
167172

168173
**[Getting Started with NextJS](/technologies/next-js/getting-started/)**
169174

175+
**[Getting Started with Vuetify](/technologies/vuetify/getting-started/)**
176+
170177
## ✅ Resources
171178

172179
- 👉 Access [AppSeed](https://appseed.us/) and start your next project

‎docs/technologies/vuetify/01-getting-started.mdx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
sidebar_position : 0
3+
title : Getting Started with Vuetify
4+
sidebar_label : Getting Started
5+
---
6+
7+
# Getting Started with Vuetify
8+
9+
<SubHeading>Getting Started with Vuetify - KickOff for Beginners</SubHeading>
10+
11+
**Getting started with [Vuetify](https://vuetifyjs.com/)** is relatively straightforward, and it involves setting up a Vue.js project with Vuetify as your UI framework.
12+
13+
![What IS Vuetify - Tutorial provided by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/270630877-a0d15af1-c7e1-4246-ab69-9284cee625b2.jpg)
14+
15+
Here are step-by-step instructions on how to get started:
16+
17+
## ✅ Install Dependencies
18+
19+
Install Node.js and Vue CLI (if not already installed)**
20+
21+
If you don't have Node.js installed, download and install it from the official website: https://nodejs.org/
22+
23+
Once Node.js is installed, you can use npm (Node Package Manager) to install Vue CLI globally by running this command in your terminal:
24+
25+
```bash
26+
npm install -g @vue/cli
27+
```
28+
29+
## ✅ Create The Project
30+
31+
**Create a New Vue.js Project**
32+
33+
Now that you have Vue CLI installed, you can create a new Vue.js project with the Vue CLI's command-line interface. Replace "my-vuetify-app" with your desired project name.
34+
35+
```bash
36+
vue create my-vuetify-app
37+
```
38+
39+
During the project setup, you'll be prompted to pick a preset. You can either choose the default preset or manually select features.
40+
41+
Ensure you have the Babel, ESLint, and Vue Router features enabled since Vuetify works well with them.
42+
43+
## ✅ Install Vuetify
44+
45+
Navigate to your project directory:
46+
47+
```bash
48+
cd my-vuetify-app
49+
```
50+
51+
Install Vuetify using npm or yarn:
52+
53+
```bash
54+
npm install vuetify
55+
# or
56+
yarn add vuetify
57+
```
58+
59+
## ✅ Configure Vuetify
60+
61+
After installing Vuetify, you need to configure it. Open the `src/main.js` file and add the following lines to import and use Vuetify:
62+
63+
```javascript
64+
import Vue from 'vue'
65+
import App from './App.vue'
66+
import vuetify from './plugins/vuetify' // Import Vuetify from your plugins folder
67+
68+
Vue.config.productionTip = false
69+
70+
new Vue({
71+
render: h => h(App),
72+
vuetify // Add Vuetify as a plugin to your Vue instance
73+
}).$mount('#app')
74+
```
75+
76+
## ✅ Create Components
77+
78+
Now, you can create a simple Vuetify component. Open the `src/App.vue` file and replace its contents with the following example:
79+
80+
```vue
81+
<template>
82+
<v-app>
83+
<v-main>
84+
<v-container>
85+
<v-btn color="primary">Click me</v-btn>
86+
</v-container>
87+
</v-main>
88+
</v-app>
89+
</template>
90+
91+
<script>
92+
export default {
93+
name: 'App'
94+
}
95+
</script>
96+
```
97+
98+
This example uses Vuetify's `v-btn` component to create a button with a primary color.
99+
100+
## ✅ Run The Application
101+
102+
You're ready to run your Vue.js application with Vuetify. In your project directory, run:
103+
104+
```bash
105+
npm run serve
106+
# or
107+
yarn serve
108+
```
109+
110+
This command will start the development server, and you can access your application at `http://localhost:8080` (or another port if 8080 is in use). You'll see your Vuetify button in action.
111+
112+
## ✅ In Summary
113+
114+
To create more complex and feature-rich applications with Vuetify, explore the official documentation, which provides detailed information about Vuetify components, layouts, theming, and customization: https://vuetifyjs.com/en/
115+
116+
You can also check out the documentation's "Getting Started" section for additional guidance: https://vuetifyjs.com/en/getting-started/quick-start
117+
118+
With these steps, you have successfully set up a basic Vue.js project with Vuetify. You can now start building modern, responsive web applications using Vuetify's extensive component library and Material Design guidelines.
119+
120+
## ✅ Vuetify Templates
121+
122+
### 👉 [Modernize Free Vuetify](https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=1)
123+
124+
This free Vuejs admin template is developer-friendly, highly customizable, and very easy to use. It allows you to create web apps in no time without any hassle.
125+
126+
- [Modernize Free Vuetify](https://adminmart.com/product/modernize-free-vuetify-vue-js-admin-dashboard/?ref=1) - product page (contains download link)
127+
- More [Admin Templates](https://adminmart.com/templates/free-admin-templates/?ref=1) provided by AdminMart (all free)
128+
129+
Developing a web app from scratch is a nightmare of every developer while getting a free Vuejs template like this is every developer’s dream.
130+
131+
![Modernize Free Vuetify - Free Vue Dashboard by AdminMart](https://github.com/admin-dashboards/vue-dashboard/assets/51854817/2723cbf7-db1f-4dd8-a130-a6180a14f417)
132+
133+
<br />
134+
135+
### 👉 [Vue Dashboard - Vuetify Material](https://www.creative-tim.com/product/vuetify-material-dashboard?AFFILIATE=128200)
136+
137+
Vuetify **Vue Dashboard** is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
138+
139+
- [Vue Dashboard Vuetify Material](https://www.creative-tim.com/product/vuetify-material-dashboard?AFFILIATE=128200) - `product page`
140+
- [Vue Dashboard Vuetify Material](https://demos.creative-tim.com/vuetify-material-dashboard/#/?AFFILIATE=128200) - `LIVE demo`
141+
142+
![Vue Dashboard Vuetify Material - main dashboard screen](https://raw.githubusercontent.com/admin-dashboards/vue-dashboard/master/media/vuetify-material-dashboard-screen.png)
143+
144+
## ✅ Resources
145+
146+
- 👉 Access [AppSeed](https://appseed.us/) and start your next project
147+
- 👉 [Deploy Projects on Aws, Azure and Digital Ocean](https://www.docs.deploypro.dev/) via **DeployPRO**
148+
- 👉 Create an amazing landing page with [Simpllo, an open-source site builder](https://www.simpllo.com/)
149+
- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder

‎docs/technologies/vuetify/README.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
sidebar_label : Vuetify
3+
---
4+
5+
# Vuetify
6+
7+
import DocCardList from "@theme/DocCardList";
8+
import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
9+
import SubHeading from "@site/src/components/SubHeading";
10+
11+
<SubHeading>All about Vuetify</SubHeading>
12+
13+
<DocCardList />

0 commit comments

Comments
 (0)