Pinia

The Vue Store that you will enjoy using

Installation

npm i @pinia/nuxt

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@pinia/nuxt']

Demo

store.js

import { defineStore } from 'pinia'

export const useDemoStore = defineStore('demo', () => {
  const counter = ref(0)
  const updateCount = () => counter.value++

  return { counter, updateCount }
})

Counter.vue

<script setup>
import { storeToRefs } from 'pinia'
const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)
const { updateCount } = demoStore
</script>

<template>
  <button @click="updateCount">
    Count is:
    {{ counter }}
  </button>
</template>