Can't use Pinia store in Nuxt app.vue root component

Hi i'm trying to call my pinia store from within my app.vue root component. I'm using Nuxt3.

But i'm getting a 500 error with the following message :

[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

Here is my files :

app.vue

<template>
  <div :is-dark-mode="appStore.isDarkMode" >
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from './stores/app';

const appStore = useAppStore()
</script>

stores/app.ts

import { defineStore } from "pinia";
import { ref } from "vue";

export const useAppStore = defineStore("app", () => {
  const isDarkMode = ref(false);
  return {
    isDarkMode,
  };
});

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@pinia/nuxt"],
});

Reproduceable codesandbox

Any idea how to fix this ? Thank you in advance.

After all, upgrading from Nuxt v3.10.0 to v4.0.3 fixed it.

My package.json

{
  "name": "nuxt",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^4.0.3",
    "vue": "^3.4.20",
  },
  "dependencies": {
    "@pinia/nuxt": "^0.11.1",
    "pinia": "^3.0.3"
  }
}