An advanced and flexible Vue.js 2.x component for displaying data tables

Data tables are fundamental components in web applications, enabling the display and manipulation of tabular data. In this comprehensive guide, we’ll explore the process of designing an advanced and flexible Vue.js 2.x component for displaying data tables. This custom component will provide a rich set of features, including sorting, pagination, and customization options, making it … Read more

Zoom the image or other thing with mouse or touch using vue.js

In modern web applications, providing an interactive and immersive user experience is crucial. One way to achieve this is by incorporating features like image zooming. In this comprehensive guide, we’ll explore how to implement image zoom functionality using Vue.js. This interactive component will allow users to zoom in and out of images seamlessly, enhancing the … Read more

Popover component using popper.js for Vue.js apps

You can implement Popover component using popper.js for Vue.js apps vue-slick-popover Popover component using popper.js for Vue.js apps Installation npm install vue-slick-popover Usage <template> <div id=”app”> <img ref=”popoverReference” width=”20%” src=”./assets/logo.png” @click=”openPopover”> <VueSlickPopover v-if=”isPopoverVisible” :popover-options=”popoverOptions” @closePopover=”closePopover” > <VueSlickPopoverContent> <p @closePopover=”closePopover”>Content</p> </VueSlickPopoverContent> </VueSlickPopover> </div> </template> import Vue from “vue” import { VueSlickPopover, VueSlickPopoverContent } from “vue-slick-popover” import … Read more

Datepicker component using Vue.js

Here you can know how to implement datepicker component using Vue.js datepicker component for Vue.js, already support Vue.js 2.x, the Vue.js 1.x version is on branch vue-1.x Follow these steps to make Datepicker componebt using vue.js Installation npm install vue-date –save Usage use with single .vue file: <template> <div> <datepicker v-model=”date”></datepicker> </div> </template> <script> import datepicker from ‘vue-date’ … Read more

Vue.js directive for a simple tooltip

Just a directive for a simple tooltip using Vue.js Follow these steps to use it in your Vue.js project Installation npm npm install vue-ctk-tooltip –save Usage main.js import Vue from ‘vue’ import CtkTooltip from ‘vue-ctk-tooltip’ import ‘vue-ctk-tooltip/ctk-tooltip.css’ Vue.use(CtkTooltip) <button v-ctk-tooltip=”‘Your tooltip message'”>Hover Me</button>

Simple Confirm Dialog verification plugin with Vue.js

Here is the following steps through that you can use Simple Confirm Dialog verification plugin with Vue.js Install $ npm install –save vue-confirm-dialog Quick Start Usage In main.js or plugin (for Nuxt.js): import Vue from ‘vue’ import VueConfirmDialog from ‘vue-confirm-dialog’ Vue.use(VueConfirmDialog) Vue.component(‘vue-confirm-dialog’, VueConfirmDialog.default) In App.vue (or in the template file for Nuxt.js (layout/default.vue)): <template> <div … Read more

Simple list picker component made with Vue.js

Here is the following steps to use a simple list picker component made with Vue.js How to install npm $ npm install vue-list-picker –save yarn $ yarn add vue-list-picker Quick start Vue.js You can import in your main.js file import Vue from “vue”; import VueListPicker from “vue-list-picker”; Vue.use(VueListPicker); Or locally in any component import { … Read more

Vue-Hotspot is an image hotspot component for Vue.js

Vue-Hotspot is an image hotspot component for Vue.js Follow these steps to use it in your project npm (Recommended) $ npm install vue-hotspot –save yarn Usage ES Modules with npm (Recommended) import Vue from ‘vue’ import VueHotspot from ‘vue-hotspot’ Using the component <template> <v-hotspot :init-options=”hotspotConfig” @save-data=”saveData” @after-delete=”afterDelete” /> </template> <script> import Vue from ‘vue’ import VueHotspot … Read more

responsive image with zoomed image on hover using vue.js

Here you can see vue.js component displays an image with the width of the parent element and on hover shows the full image or a scaled image in the image area installation include zoomOnHover.js, which registers the vue component and defines zoomOnHover, the variable for the component configuration object. also include zoomOnHover.css, which contains the … Read more