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 -
npm i --save vue2-frappe Next, register it as a Vue plugin -
import Vue from "vue"; import Chart from "vue2-frappe"; Vue.use(Chart); Frappe in Quasar In Quasar you can’t do a Vue.use like the above. There is no main.js to orchestrate that.
...
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. These were simply called app plugins which led to them being mixed up with Quasar’s own plugins. Now they are simply referred to as “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.
We can use FeathersJS and Feathers-Vuex (our choice of client storage) to conjure up a client application that totally blows away our users.
...
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 :)
The Case for a New Boilerplate I take my role as a developer with every bit of smartness inherent in me. The problems faced with my back-end projects and my simple solution, booster project in AdonisJS, are very relevant to VueJS and other front-end experiments.
...
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. Restarting quasar dev doesn’t help either.
...
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)
Step 2: Vuex is already added for you - see below code in main.js -
...
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 -
Vue Native - based on React Native but enables on Vue Native Script - has VueJS development option Capacitor - based on web view and Cordova Cordova - the age-old framework that is showing its age :) All of these technologies bring the ease of Javascript and the power of familiarity / developer experience of developing on Vue for creating mobile applications.
...
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.) for list or detail views .. and so on. Vuetify and Quasar allow you to do your own thing, but I find the below way of creating layouts easiest.
...
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? Yes, I did.
reusable debounce function strange throttling effect to allow function call only once awkward debounce using generators But, not in Vue.
...