Let us create a small example to-do app using Vue from CDN. There is not going to be any backend for this application. Create basic structure The basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 <!-- index.

There are multiple ways of using VueJS - which should you use? VueJS is flexible and powerful - not a combination that you often see together. You can initiate and use Vue in more than one way in your app. Use in package with a build cycle This should be your preferred way of using Vue.

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.

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.