How do I use Pinia in my Nuxt application?

How do I use Pinia in my Nuxt application?

To use Pinia in your Nuxt application, first install it using npm or yarn. Then, create a store and register it in your Nuxt app.

Can you show me an example of creating a store?

Sure! You can create a store by making a new file in the stores directory. For example, stores/counter.js could look like this:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

How do I access this store in a component?

You can access the store in your component by importing it and calling the store function. For example:

import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};

What about using Pinia with server-side rendering?

Pinia works seamlessly with Nuxt's server-side rendering. Just ensure you initialize your stores in the nuxt.config.js and use the useStore function in your components.