I love Vue / Vuetify and use them quite often in my projects.
I had to display charts in a couple of recent projects and my search led to v-charts. I was impressed with what the library could do -
v-charts is a Vue wrapper for eCharts, the Baidu-developed chart library The v-charts library makes it really easy to use ECharts. Docs have improved significantly after transitioning to be an Apache incubator Charts are amazing. They are responsive and reactive without needing any additional work So then, I was within reach of nirvana in my ‘pursuit of excellence’ in development of typical data-driven applications.. .. until I came across an issue with displaying charts in tabs.
...
A common requirement in any data-driven application is to show any alerts including error or warning messages at a standard location within a Vue component. This is easily accomplished using v-alert in Vuetify, but it is a good idea to use it in combination with a snackbar.
Consider a typical component Account.vue -
<template> <div class="account"> <v-layout row wrap> <v-flex xs12 class="title"> Accounts </v-flex> <v-flex xs12> <AccountList></AccountList> </v-flex> <v-flex xs12> <AccountDetail></AccountDetail> </v-flex> </v-layout> </div> </template> The requirement is to show informational messages, errors or warnings - either from back-end applications or front-end validation messages etc. as a popup alert.
...
In one of the recent projects there was this requirement to create a FAQ page for a small application. The change was not planned and came up during the final stages of the project.
I took it in the same spirit as what I do for a home page. I did not plan to use SSR or a static-site generator, but rather leaned back on the excellent ‘prerender-spa-plugin’.
prerender-spa-plugin will take care of pre-rendering the content, and I don’t need to worry on the performance or the SEO side of things.
...
You can do the following in a password box to hide or show passwords on click.
<template> <v-text-field name="password" :value="myPass" label="Enter password" :append-icon="value ? 'visibility' : 'visibility_off'" @click:append="() => (value = !value)" :type="value ? 'password' : 'text'" ></v-text-field> </template> <script> export default { data() { return { value: String, }; }, }; </script> Password is captured in a v-text-field element and we are doing a couple of things here -
Use ‘show’ or ‘hide’ icons based on whether password is shown in plain text or as a hidden item (append-icon). We use type to be password or text to achieve this Show or hide password when user clicks on the appended icon The end-result -
...
Search in Vuetify data tables is just beautiful. Define a data table and a search is readily available for you. What else can a human ask for?
In fact, data tables were the single biggest reason for me to choose Vuetify about an year back. My long term association with data-driven application means that I am ever-so-dependent on the data table functionality.
Many other libraries in the market need you to implement search by yourself. Although not a big deal (the code is highly reusable), it is nice to not worry about yet another feature for once.
...
I have been using Vue and Vuetify quite a bit and absolutely loving it. The combination alongside some of the backend Javascript frameworks (like AdonisJS, Strapi) make web app building fast and fun.
In this post let’s take a look at how we can dynamically style elements by using data to drive styling.
An Example with Data tables One of the common factors in all my data-driven applications is the data table. Looking back one of the primary factors for choosing Vuetify may be its powerful data table. I just need to supply a dataset and with the power of Vue, I have a super user-friendly table.
...