The emergence of new frameworks for visual component encapsulation in web applications has highlighted several other needs: routing, security, SPA and PWA support, internationalization, and of course, UI. This also applies to Vue.js, which has gained a large community in recent years and is particularly popular for web development and hybrid mobile applications. Although the focus of Vue.js is on the component logic and the application as a whole, it unfortunately does not save you from working with another UI library or framework.
Among the numerous UI frameworks that deal with customizing and facilitating visual components and screen design, there are frameworks that have adopted the famous Material Design standard. The community has widely accepted this option as it embraces both the desktop and mobile worlds with their responsiveness, flexibility, and extensibility. Since most developers are familiar with it, the question has been asked: why not combine the Materialize trend and Vue.js?
What is Vuetify?
Vuetify is a complete UI framework that is based on Vue.js and complies with the Material Design (MD) specification. This means that the core functions of both Vue and Material are available by default and can be improved by both communities. The goal is to provide developers with tools to create rich and engaging designs and user experiences. Vuetify is easy to learn and provides hundreds of carefully crafted components from the MD specification. It supports all modern browsers and is compatible with Vue CLI-3. It also provides basic templates for Simple HTML, Webpack, NUXT, PWA, Electron, A La Carte, Apache Cordova.
Of course, that also means that you have to take on the MD with Vuetify. If you develop an app exclusively for IOS or have to rely completely on your own design, Vuetify is not the right decision. So also with Vuetify the rule remains the same: first analyze the requirements of the project, then select the UI framework.
There are several ways to install Vuetify. I will explain one way in the following chapter, the rest can be found at: https://vuetifyjs.com/en/getting-started/installation/ .
After creating an instantiated project, you can add the Vuetify Vue CLI package with the cli. With:
vue add vuetify
Vuetify is a reusable semantic component framework for Vue.js that aims to provide clean, semantic and reusable components. There are many factors to consider when starting a new framework. The advantage of Vuetify is that many of the pros and cons have already been absorbed by Vue itself. In addition, you have to analyze the real needs of a project. As mentioned earlier, Vuetify may not be suitable for a project that relies on a design by itself. However, when it does, you have a productive and extremely powerful tool on hand for building impressive websites. Anyone interested in Vuetify can get an overview of all components, styles, animations, etc. at: https://vuetifyjs.com/en/introduction/why-vuetify/ .