Vuetify UI or MD Framework

Vuetify is a user interface(UI) or material design framework or you can say library with beautifully handcrafted Material Components. No design skills required — everything you need to create wonderful applications is at your fingertips.

Vuetify

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. 

user interface(UI) are collections of these modules that implement a specific style guideline and provide the necessary tools to build expansive web applications or mobile 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.........................................................


<script type="text/x-template" id="app-template">
  <v-app>
    <v-container>
      <!-- -->
    </v-container>
  </v-app>
</script>

<div id="app"></div> 

------------------------------------------------.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.

<head>

  <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

Vuejs3 tutorial

 Introduction of Vuejs3 Vuejs  is a JavaScript libraray and a Progressive js-framework or you can a modeil view controller framework for bui...

Powered by Blogger.