I had to work on a MVP where there were specific instructions to use Vue directly from a CDN. The Vue build available in this way is also called UMD (Universal Module Definition) build since you can use Vue from anywhere and the project does not need specific setup to build and package your code.

Here’s a quick way to use Vue plugins in Quasar. Use Case: Frappe Charts in Vue Let’s consider a simple use case for using Vue plugins - we want to use Frappe charts. We can simply use vue2-frappe to easily do that. Just install the package in your project -

Quasar CLI structures project differently as compared to a standard Vue CLI app. As a result, you cannot just follow examples on the Internets blindly and use Vue.use(), or start changing code in main.js. There are, however, great ways of addressing the same problems with slightly different solutions. Enter boot files.

Quasar is great. But, it is also a bit different when it comes to accessing the Vuex store from your code. Why is Quasar any different? “Is it not just Vue?” Well, yes. But.. the project structure created by Quasar CLI differs from a “normal” that by Vue CLI. Quasar CLI builds on top of Vue as well but may not follow similar practices to other frameworks / libraries using Vue.

Here we see how to build a real-world client application for your FeathersJS backend. We will use Vue + Feathers-Vuex and quickly create the frontend app. Building the Client Application Previously you saw how we could use Feathers to quickly build a backend application. The beauty of feathers is not only that it is quick to build, but it is also universal.

VueJS booster template is a boilerplate that has simple features that make it really easy to start new projects. Vue CLI makes starting a Vue project simple - vue create demo This sets up everything that you need to start - but just so. There are more than few things missing for a functioning/easy-to-use project :)

Do you see quasar dev stuck but no errors reported anywhere? The fix was quite easy - only the way to get to the fix was frustrating. I faced this issue in a medium-sized project that I was playing around with. I was stupid enough to change a few lines in multiple components, and lo and behold - I don’t see the changes being compiled.

Vue is great and Vuex makes it greater. But, how do you use them stores? Vuex: You exy thing Vuex makes it a breeze to handle states, mutations and actions in Vue. All I need to do is follow a couple of steps. Step 1: Select Vuex as an option when you create the Vue application (or, you can always add it later)

If given a choice to develop mobile apps, what is it going to be Capacitor, Cordova or something else altogether? Here are my glorious opinions on the matter. The World of Mobile Apps - with VueJS As fans of VueJS, we have more than few options for mobile app development. A few popular ones are -

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.

Debounce operations in Vue using this 10 line script. Avoid loadash and friends. What is debounce? Delay and throttle operations to wait and collect user input before doing something with the input. The “something” can be updating another field, doing an API call, or starting a timer to self-destruct. Did you not debounce earlier?

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.

A nice way to pass along all scoped slots to a component. We can pass all props from the source component to target using this code - 1 2 3 4 5 6 7 <wrapper> <b-table v-bind="$attrs" v-on="$listeners"> <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope" ><slot :name="slot" v-bind="scope" /></template> </b-table> </wrapper> Found this in this StackOverflow post.