The purpose of the project is to allow developers with the tools they need to build rich and engaging user experiences.
we can say other frameworks then Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the (MDS) Material Design specification.
Vuetify takes first approach to design which means your mobile application just works out of the box—whether it’s on a mobile phone, desktop computer , laptop and tablet.
Why Vuetify?
Vuetify is part of Vue.js framework has grown to be one of the most popular JavaScript frameworks in the whole world. One of the reasons for this popularity is the wide range of components which enable developers to make concise modules to be used and re-used throughout their application.
Vuetify has a very active development framework and is patched responding to community issues and reports at breakneck speed,it's allowing you to get your hands on bug fixes and enhancements more often.
Vuetify is exactly according to develop for Material Design specification with every component meticulously crafted to be modular, responsive and also Customize your application with unique and dynamic Layouts with styles of your components using SASS variables.
How can install vuetify...... click here ....
Syntax....
....................................................................htm file.........................................................
------------------------------------------------.js file..............................................................
const App = {
template: '#app-template',
data: () => ({
//
})
}
new Vue({
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
Installation with CDN
if you want to use offline or run this code without localhost like run on browser not on local server on test using Vuetify without installing a template from Vue CLI, copy the code below into your index.html file.
if you need to utilize the CDN packages in a production environment, it is recommended that you scope the versions of your assets according to your write the code req.
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>or
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="thewebbazar">
<v-app>
<v-main>
<v-container> Hello thewebbazar </v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue ({
el: '#thewebbazar',
vuetify: new Vuetify(),
})
</script>
</body>
</html>and also use or installation for other tools like CORDOVA, ELECTRON and Progressive Web App (PWA)
No comments:
Please don't write any spam text or message