I am a big fan of Vuetify - it has far too many components available out of the box and makes my life as easy as it gets. But that does not prevent me from getting annoyed by small “stuff” that matter. Take tooltip as an example. Vuetify has v-tooltip component to enable tooltips -

Nuxt enables automatic routing. All you need to do is - Create the Nuxt app Create Vue pages under pages root directory All pages will automatically be routes in the app - no need for a distinct Vue router definition. Automatic Routes in Nuxt Consider the below pages in an example app https://my-app.

I have always struggled with new projects. Don’t get me wrong - we live in exciting times and all that. But, there is this thing called “conundrum of choice”. There are just too many ways to get things done and the “next shiny thing” syndrome rears its head each and every darn time.

I had used VueDraggable in my projects before, but only sparingly. One of the recent experiences taught me just how cool it was! The Problem of Drag & Drop There is no problem.. really. You drag You drop And the world goes “yeah yeah yeah” (.. use this tone - sorry, couldn’t resist)

Here’s an high-level overview of local storage, popular options to get started on local storage in Vue, and how to choose an option that works for you. Local Storage and Browsers Browsers are windows to your web application. While it is easier to manage data access on your own servers, super secure and all, getting users to connect to the server for each and every task can be tiring and lead to a bad user experience.

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)