Simple Local Storage implementation using Vue 3, Vueuse and Pinia with zero extra lines of code.

Photo by Saffu on Unsplash

Sometimes you just neeeeed a local storage utility without headaches. Currently Pinia is still in the progress of constructing their plugin system, where they will most likely implement their own local storage plugin similar to vuex-persist.

Let us start.

We will need the following libraries.

1. pinia
2. vueuse

yarn create @vitejs/app persist-state --template vue
yarn add @vueuse/core
yarn add pinia@next

1. Setting up Pinia

Initiate Pinia in the main.js

import { createPinia } from 'pinia'

createApp(App).use(createPinia()).mount('#app')

First we will create a `store.js` file with a basic todo.

2. Now for the App.vue markup.

We will import out store.js file into the .vue file. And create a basic todo.

Great! A good ol’ simple todo.

Notice how clean and accessible Pinia is!

3. Time for the magic.

Going back to the store and add the following.

import { useStorage } from '@vueuse/core'

Change your todos state to

todos: useStorage('todos', [])

Now you have a reactive local-storage ready to go!