vue.js Use Vue modifiers to make form handling with Vuetify easier Vue contains two very convenient v-model modifiers for trim and number. Using them means that the models are only updated after the trim or number conversion are done, which means we don't have to do those things ourself anymore. As an example let's say we have
typescript Typed constants with Record in Typescript When I define types in Typescript, I also define a list of valid options as an object so that I can reference it in the rest of my code. A type definition for a currency would for example with a list would look like the following. export type Currency = '
vuetify Format localized Vuetify datepicker value with Vue mixin The example for showing a formatted date in a datepicker with Vuetify uses a computed property to format the value in the text field. Something like this: <v-menu> <template v-slot:activator="{ on }"> <v-text-field :value="formattedDate" :label="$t('domain.manageFunds.
typescript Round Moment.js to previous interval When working with dates and times it's not unusual to restrict the options a user can choose. For example when presenting the user with a dropdown of times to choose from, but only allow 5min intervals. You want to add a sensible default, for example the previous interval.
vuetify Checkbox group in Vuetify There is already a component for a radio group from Vuetify, but if you want to handle multiple checkboxes, you're out of luck. It doesn't seem to likely, that this will change any time soon as a Github issue for it was closed by the maintainer
typescript Record with optional keys with Typescript The Record type in Typescript is very useful. With it you can define an abstract object in more detail. This is very helpful when building a base interface for extending. With it you can do things like this: export interface CommandWithFiles { body: object; files: Record<string, File>; } export
typescript Use ignore pattern of eslint for max-lenth to allow for long import lines When working with Vue and Typescript the default settings for eslint are to complain about lines longer then 140 characters. Which works great for the usual code but not for imports. Putting every class / function in to a separate lines works but makes for a lot of scrolling. Using ignore
typescript Sum numbers in array of objects with Typescript In the old days a simple for loop would be enough. It still is, but way more code then needed when working with arrays. When working with reduce we can create a sum for every item. In the example we have a TimeEntry interface with multiple attributes. We only care
vue.js Working with forms and Vuetify Vuetify is a great component library, but it doesn't really guide you through the Javascript or Typescript part. I usually use Typescript and found a good way to handle forms throughout all components. It all start's with an interface: export interface FormDefinition { valid: boolean; fields: { [key:
typescript Download file through Typescript / Javascript When working with JWT a few things get a little bit trickier. One of the examples is downloading a file through an API. When working with sessions, you can just open a link in a new tab and as long as it's on the same domain you can
vue.js Axios interceptor to refresh JWT token after expiration JSON Web Tokens expire pretty regularly. That's kind of what they are made for. But our API calls shouldn't fail because of it. So we need an interceptor who deals with this. When working with Vue, I prefer to use JWT for the authentication between my
