How to access nuxtApp in pinia store (Nuxt3)?

[Lanayx]

Previously I accessed it using this.$nuxt, but what should I do after it was removed? https://github.com/vuejs/pinia/blob/v2/packages/nuxt/CHANGELOG.md#030-2022-07-13
useNuxtApp() fails with Error: nuxt instance unavailable

[posva]

Out of curiosity: what are you using from useNuxtApp()?

[hymair]

Same here. I use useCookie inside pinia actions and get "nuxt instance unavailable"

[daktas]

any solution to this?

[rezaser74]

guys i've got a solution for this problem....
if you use setup store you can call useCookie and can set your cookie like this.

import {defineStore} from "pinia";
import {ref} from "vue";
import {useCookie} from "nuxt/app";

export const useStore = defineStore('main', () => {
const cookie = useCookie('token')
const token = ref(cookie);

function getState(key) {
    return this[key]
}

function setState([key, value]) {
    this[key] = value;
}
function setToken(t){
    cookie.value=t;
    token.value=t;
}

return {
    token, setState, getState,setToken
}

})

[kangetsu121]

Hi, I don't know if it helps you but calling useNuxtApp inside getter as below works in my case.

import { defineStore } from "pinia";

// This causes error: nuxt instance unavailable
// const { $myPluginFunc } = useNuxtApp();

export const useMyStore = defineStore("key", {
  state: () => ({
    k1: "",
  }),
  getters: {
    myGetter() {
      // This WORKS
      return useNuxtApp().$myPluginFunc(this.k1);
    },
  },
});

[Arthur-Chevron]

Hi, i use Nuxt 3 for static website. I use Pinia to manage my cookies and the package jose to decode my jwt token store in my cookie. I can call provider from my Pinia store.
For that you need to set up order to your plugins file. So you need to set your files name like this 01.myPlugin.js, 02.myOtherPlugin.js. See the documentation here: https://nuxt.com/docs/guide/directory-structure/plugins

Pinia store: cookie.js

export const useCookieStore = defineStore('cookie', () => {
    const { $tokenIsValid } = useNuxtApp()
    // define datas
    const cookie = useCookie('_ei')
  
    const setCookie = (_cookie) => cookie.value = _cookie

    const getCookie = () => {
        console.log(cookie.value)
        // on check si le jwt est encore valide
        const tokenAlive = $tokenIsValid(cookie.value)
        if (!tokenAlive) cookie.value = null

        return cookie.value
    }

    return {
        cookie,
        setCookie,
        getCookie
    }
})

Plugin: 01.jose.js

import { decodeJwt } from 'jose'

export default defineNuxtPlugin(() => {
    const decodeEmailVerified = (token) => {
        if (!token) return false
        const decoded = decodeJwt(token)
        
        return decoded.mail_confirmed
    }

    const tokenIsValid = (token) => {
        if (!token) return false
        const decoded = decodeJwt(token)

        // check if token is expire
        const date = Date.now() / 1000
        // return true if token is expire
        return date < decoded.exp
    }

    return {
        provide: {
            emailVerified: decodeEmailVerified,
            tokenIsValid: (token) => tokenIsValid(token)
        }
    }
})