Pinia setup Official Website

Note : The Pinia state management library is exclusively use for Vue 3.

Install pinia with your favorite package manager:

Add Package
npm i pinia
Import Package
import { createPinia } from "pinia";
const pinia = createPinia();
Remove Package
yarn remove pinia ( you can remove package by removing specific package from package.json )
Here let's have one store name layout. Create store in src/state/pinia/layout.js 
import { defineStore } from "pinia";
export const useLayoutStore = defineStore("layout", {
    state: () => ({
        layoutType: "vertical",
        leftSidebarType: "dark",
        layoutWidth: "fluid",
        topbar: "dark",
        loader: false,
        mode: "light"
        }),
        actions: {
        changeLayoutType(layoutType) {
        this.layoutType = layoutType;
        },
        changeLayoutWidth(layoutWidth) {
        this.layoutWidth = layoutWidth;
        },
        changeLeftSidebarType(leftSidebarType) {
        this.leftSidebarType = leftSidebarType;
        },
        changeTopbar(topbar) {
        this.topbar = topbar;
        },
        changeLoaderValue(loader) {
        this.loader = loader;
        },
        changeMode(mode) {
        this.mode = mode
        }
    }
});
To centralize all stores, create one file name pinia.js at src/state/. Import store here as per bellow, 
import { useLayoutStore } from "./pinia/layout";
const pinia = createPinia();
export default pinia;
export { useLayoutStore };
This code is having layout store and also pinia instance. To configure pinia to the project make changes to main.js file as per bellow. 
import pinia from '@/state/pinia'
createApp(App)
    ...
    .use(pinia)