Date pickers are straight forward, but can become laborious in Vuetify components. Look at how date pickers are implemented in Vuetify - they can cause minor trauma for a beginner. The efficient solution is to implement a custom component. Wrap menu + input box in that generic component, and use it everywhere.

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.

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.

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 <!

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

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.

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.

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.

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.

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.

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 -

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.

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.