Pinia Setup

Pinia is the recommended state management library for Vue 3, providing a simple and efficient way to manage application state.

1. To install Pinia, run the following command:

npx nuxi@latest module add pinia
#  follow the instructions to install correctly then setup pinia for persisted state also

npm install pinia-plugin-persistedstate

npm install @vueuse/core
2.Register Pinia in your nuxt.config.ts:
export default {
  modules: ["@pinia/nuxt", "pinia-plugin-persistedstate/nuxt"],
};
3. Create a Pinia Store
// add code to file stores/userDetailsStore.ts
import {defineStore} from 'pinia';
import {useLocalStorage} from "@vueuse/core"
import {ref} from "vue";

export const useUserDetailsStore = defineStore('userDetails', {
    const user = useLocalStorage('user', {});

    return {user};
})

With these steps, you have successfully set up and used Pinia in your Vue application. You can now create additional stores and manage your application's state more effectively.

Edit this page on GitHub