In command prompt enter the command npm i pinia-plugin-persistedstate Add the plugin to pinia import { createPinia } from ‘pinia’ import piniaPluginPersistedstate from ‘pinia-plugin-persistedstate’ const pinia = createPinia() pinia.use(piniaPluginPersistedstate) Add the persist option to the store you want to be persisted: import { defineStore } from ‘pinia’ export const useStore = defineStore(‘store’, { state: ()… Continue reading How to persist Pinia variables in vue js
Tag: vue js
Generate Excel Reports with Item Images in NetSuite using Vue.js + ExcelJS
Sometimes business users need Excel reports with images, totals, and summaries—something NetSuite’s standard reporting doesn’t easily support. By combining Suitelets, Vue.js, and ExcelJS, we can generate fully customized Excel files directly from the browser. 🔧 What We Used Suitelet → serves a Vue.js frontend Vue.js → user interface and trigger ExcelJS → build styled Excel… Continue reading Generate Excel Reports with Item Images in NetSuite using Vue.js + ExcelJS
Vue Local Storage Binding (Reactive)
<script setup> import { useLocalStorage } from ‘@vueuse/core’ const name = useLocalStorage(‘username’, ‘Guest’) </script> <template> <input v-model=”name” /> </template>
Vue Dark Mode Toggle
<script setup> import { useDark, useToggle } from ‘@vueuse/core’ const isDark = useDark() const toggleDark = useToggle(isDark) </script> <template> <button @click=”toggleDark()”>Toggle Dark Mode</button> </template>
VueUse
VueUse is a collection of essential utility functions (a.k.a. composables) built on top of the Vue 3 Composition API. Think of it as a Vue-native version of lodash, React Hooks, and browser API helpers combined. It helps you write less code, stay reactive, and boost productivity by handling common patterns in a modular way. 📦… Continue reading VueUse
VueUse – Utility Functions
Description: VueUse is a collection of useful utility functions that help with state management, browser APIs, and performance optimizations. Installation: npm install @vueuse/core Example: Dark Mode Toggle import { useDark } from ‘@vueuse/core’ const isDark = useDark() <template> <button @click=”isDark = !isDark”>Toggle Dark Mode</button> </template>
Vue Draggable
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js Description: Makes elements draggable and reorderable with Vue.js. Installation: npm install vuedraggable Example Usage <script setup> import { ref } from ‘vue’ import draggable from ‘vuedraggable’ const items = ref([‘Item 1’, ‘Item… Continue reading Vue Draggable
Vue Chart.js – Data Visualization
vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reuseable Install this library with peer dependencies: pnpm add vue-chartjs chart.js # or yarn add vue-chartjs chart.js # or npm i vue-chartjs chart.js Then, import and use individual components: <template> <Bar :data=”data” :options=”options” /> </template> <script lang=”ts”> import { Chart as ChartJS, Title,… Continue reading Vue Chart.js – Data Visualization
Pinia Plugin Persistedstate
Features Persist Pinia stores with a friendly API inspired by vuex-persistedstate. Highly customizable (storage, serializer, paths picking/omitting). Out of the box SSR-friendly support for Nuxt. Very smol (<2kB minzipped). Quickstart Install with your favorite package manager: pnpm : pnpm add pinia-plugin-persistedstate npm : npm i pinia-plugin-persistedstate yarn : yarn add pinia-plugin-persistedstat Add the plugin to pinia: import { createPinia } from… Continue reading Pinia Plugin Persistedstate
Pinia The Modern State Management Solution for Vue.js
Pinia is the official state management library for Vue.js, designed as a simpler and more efficient alternative to Vuex. With its modular architecture, Pinia provides a lightweight yet powerful way to manage application state.