category: Vue

Enabling social share buttons in Vuetify is quite easy. All you have to do is stitch together three components provided out of the box - Speed dial Buttons Icons We will create a quick demo on Codepen. Create a new Codepen, click on Settings, navigate to JS and add the below libraries - https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js Click on Save & Close. In the JS editor, paste following code to initialise Vue. new Vue({ el: "#app", vuetify: new Vuetify(), methods: {}, data() { return { dialShare: false, pageUrl: "https://techformist.com", }; }, }); In the “normal” app, you would want to extract the page URL with something like this.$route.fullURL. ...

Firestore can make up for a great backend application. You can get started quite easily, scale it up nicely, and in general, worry less about the “server” side of things. While it is quite easy to use Firestore as-is, using it in Vue opens up a whole new universe. But, first - let’s go through the grind of knowing why we would want to do this? And, of course, to please everyone who just happens to be here reading the next exciting story on a lazy afternoon. ...

Vuetify is a God-send for lazy developers like me. Thanks to Vuetify I have all styles standardized, customise UI to my heart’s content and create an app that is ready to take on any device. But, Vuetify does not support masonry layout for your grid. Here’s a look at available options if you need masonry layouts in your projects. A Typical Vuetify Grid The typical Vuetify grid is made up of rows and columns. Creating such a grid is quite simple. ...

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 - <template> <div class="text-center d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark v-bind="attrs" v-on="on">Button</v-btn> </template> <span>Yes, this is a button</span> </v-tooltip> </div> </template> This will result in the below UI - ...

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.com- Create /pages/index.vue for your home page => maps to => https://my-app.com/ Create /pages/contact.vue for your contact page => maps to => (https://my-app.com/contact Create /pages/customers.vue for to display customers => maps to => https://my-app.com/customers The directory structure in pages.. ...

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 can safely say that I have never really achieved a standard flow to get things started. Why is that important did I hear you ask? ...

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) The problem manifests itself when that drag and drop can include any and all components. So, that’s effectively the modern web. ...

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. These are some use cases that highlight such problems - ...

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 demo of how a simple Vue setup from CDN can be used for quick demo projects. ...

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