tag: Vuetify

In this post we will see how to create a simple timesheet app using Vue and Vuetify. This is not quite a comprehensive tutorial on Vue or Vuetify, rather a demo of front-end features, see how easy it is to build an usable app, and in general, how modern app development makes the whole process enjoyable. What are we building? A simple timesheet app that will - enable to enter time on a day enable export of time data We will store everything in browser storage and there will be no standard persistence layer. This app may or may not plugin to backend (Firebase? ExpressJS / Fastify? Hasura? Other?) in the future - comment and let me know if you’re interested in seeing that! ...

Dialogs are those thingies that popup on your UI and are handy to allow users to perform actions without navigating away from the screen. For example, here’s one that enables users to create new request.. .. and here’s an example from Vuetify site that shows a short message. The v-dialog component is the recommended way to show confirmation dialogs too. While confirmation dialogs are great, they could get annoying if used in three hundred different places. For e.g. what do you do if you need a yes/no confirmation dialog? ...

Enabling social share buttons in Vuetify is quite easy. All you have to do is stitch together three components provided out of the box - Speed dial Buttons Icons We will create a quick demo on Codepen. Create a new Codepen, click on Settings, navigate to JS and add the below libraries - https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js Click on Save & Close. In the JS editor, paste following code to initialise Vue. new Vue({ el: "#app", vuetify: new Vuetify(), methods: {}, data() { return { dialShare: false, pageUrl: "https://techformist.com", }; }, }); In the “normal” app, you would want to extract the page URL with something like this.$route.fullURL. ...

Vuetify is a God-send for lazy developers like me. Thanks to Vuetify I have all styles standardized, customise UI to my heart’s content and create an app that is ready to take on any device. But, Vuetify does not support masonry layout for your grid. Here’s a look at available options if you need masonry layouts in your projects. A Typical Vuetify Grid The typical Vuetify grid is made up of rows and columns. Creating such a grid is quite simple. ...

I am a big fan of Vuetify - it has far too many components available out of the box and makes my life as easy as it gets. But that does not prevent me from getting annoyed by small “stuff” that matter. Take tooltip as an example. Vuetify has v-tooltip component to enable tooltips - <template> <div class="text-center d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark v-bind="attrs" v-on="on">Button</v-btn> </template> <span>Yes, this is a button</span> </v-tooltip> </div> </template> This will result in the below UI - ...

How do you create typical layouts in the the most popular Material Design styling libraries for Vue? Creating layouts for your application Layouts help us standardize UI across the application. For e.g., you have layouts to take care of - Toolbar for the app and for views/components Navigation bars Standard controls (buttons/titles etc.) for list or detail views .. and so on. Vuetify and Quasar allow you to do your own thing, but I find the below way of creating layouts easiest. ...

Centralize all error, warning and info alerts in one place. I like v-alert and tend to over-use it. It enables us to show detailed notifications (error or otherwise) - without significantly causing user inconvenience. I find v-alert more suitable in my apps than using, say, popup alerts that interrupt users, or “toast” notifications which I find unsuitable for detailed messages. I use v-alerts to - display error or informational messages post an API call show form validation errors that cannot be shown against individual controls guide user action How do I alert? Using alert in Vuetify is simple enough. Introduce this one line in your components that needs alerts. ...

What is your preferred way of showing role-based menus and buttons in toolbar and navigation menus? A typical application may have many toolbars and navigation bars, each relevant to a specific set of users. You can then show/hide the elements based on the user role. In smaller applications, I simply choose to show or hide the menu items on a single navigation bar. This is easier to develop and to maintain. ...

I am a fan of dialogs but overlay function was long due in Vuetify. It is fairly common to use Vuetify dialogs to popup a component. You would have seen this option against many ’edit’ buttons in data tables, or against ’new’ button in a list/detail component. We include such a dialog using v-dialog. But, what do you do when you need specific elements highlighted and active? Well, that wasn’t difficult - it just needed stitching together stuff. ...

Vuetify has been an excellent companion to me. I absolutely suck as a designer. I can hide behind libraries like Vuetify and unleash my web app creativity on this poor planet. So, it was with lot of excitement that I looked forward to Vuetify 2.0, which had been sometime in the making. Meanwhile, my lack of interest in following up on beta news meant that I merrily continued to use Vuetify without a care of the world. That’s the reason the many breaking changes came as rather shocking news. My enterprisey application background, and a somewhat pseudo-hobbyist mindset for a few applications did not help one bit. ...