Vue
Input Field with Date Picker in Vuetify
· ☕ 3 min read
Date pickers are straight forward to implement, but input fields with date pickers need a bit of decoration. What we need? An input field with a date picker that opens on click shows the selected date How do we create that? We start with the ‘date picker’ component in Vuetify.

Use SVGs directly in Vue
· ☕ 3 min read
SVGs are optimized image files that bend to your will, er.. size. They stay sharp at various resolutions, are small in size, and can change colour through code! And, it is really easy to use them in Vue single file components. Consider this example of a tomato. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <svg style="display:none;" version="1.

Accept Multiple Props in a Vue Component
· ☕ 1 min read
Vue enables you to define more than one prop against a component. See which component communication is effective and how props compare to Vuex Defining prop in a component is simple enough - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!

Component Props in Vue
· ☕ 3 min read
Vue enables you to define more than one props against a component. Defining props and passing around values are one of the ways of getting components to react to values passed to them (think arguments), or talk to each other :). See which component communication is effective and how props compare to Vuex

Reload Component based on Routes in Vue
· ☕ 2 min read
If two links in your Vue application point to the same view, clicking those links one after the other may not result in data being refreshed from server. Imagine you have the same view for two different links - My account All account Both links will point to Account.

Global Variables and Functions in Vue
· ☕ 2 min read
Vue provides a way to create global variables and functions using Vue.prototype. What do you normally do if you want to create a global variable in Vue? You don’t. Global variables have no place in today’s society You create variables in storage. That’s the purpose of storage You can say the exact same thing about functions.

Delete Element in Array Reactively in Vue
· ☕ 2 min read
Deleting elements in an array maintains reactivity in Vue when done right. These arrays can be local variables in a component, or state variables in Vuex - the behaviour is the same. Let us consider this example - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <template> {{ fruits }} <v-btn @click="deleteFirst"> Delete First </v-btn> <v-btn @click="deleteLast"> Delete Last </v-btn> </template> <script> export default { name: "Farm", data() { return { fruits: ["apple", "orange", "grapes", "pear"] }; }, methods: { deleteFirst() { this.

URL Params in Vue
· ☕ 3 min read
Why and how would you pass parameters to a Vue application? You might have seen URLs that pass parameters to whatever front-end / back-end logic that is processing them. This will be something akin to - https://myapp.com/accounts/1 https://myapp.com/accounts/1/todo/2 https://myapp.com/accounts?id=1 https://myapp.com/accounts?query=abc&role=my id, query, role are parameters passed in the URL. The receiving function can have access to the parameters and values, and have processing logic based on values.

Reusable Alerts in Vuetify
· ☕ 3 min read
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.

Take Full Advantage of Vue Components
· ☕ 3 min read
When beginning in Vue it may seem easier to create self-contained components, use them in views and call it a day. But Vue components can be much more powerful. Let’s consider an example where you have to create two views - Account and User. Typically, you create an Account.vue view -

Role-based Data Filters in Vue
· ☕ 4 min read
I would love for the world to wait for a carefully architected VueJS app. But often it doesn’t. I recently had to quickly implement a role-based filter for a data driven application. And, the experience left me somewhat dizzy. First, the basics - Roles had been implemented in the application as custom logic - back-end server framework had roles defined against users Permissions were used to check access to specific routes of API.

Always Create 404 Pages in your Vue App
· ☕ 4 min read
I create 404 pages as a standard practice in my Vue applications. You need that to manage browser page refreshes and to serve direct URLs for all possible pages in your application. Vue app has two parts - backend API frontend routes (pages) Any and all requests to the server go through our Nginx web server.

Avoid Vuex Boilerplate Code using Pathify
· ☕ 4 min read
Vuex is a lot of boilerplate. Consider this user store - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 //store/user.