Pinia store does not initialise

Question

I have a new Nuxt 3 project and wanted to add Pinia. The store is created, but is not loaded. I do not receive an error message or warning. The dev tools of both Nuxt and Vue show me that Pinia is installed. But I only see the Pinia (root) and no store.

package.json

{
  "name": "nuxt-app",
  ...
  "dependencies": {
    "@nuxt/types": "^2.17.3",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "@pinia/nuxt": "^0.5.1",
    "@vueuse/core": "^10.10.0",
    "nuxt": "^3.11.2",
    "pinia": "^2.1.7",
    "primeicons": "^7.0.0",
    "primevue": "^3.52.0",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {
    "@nuxt/eslint": "^0.3.13",
    "@vueuse/nuxt": "^10.10.0",
    "eslint": "^9.3.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.26.0",
    "nuxt-primevue": "^3.0.0",
    "prettier": "^3.2.5",
    "typescript": "^5.4.5",
    "vue-tsc": "1"
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
// eslint-disable-next-line no-undef
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    'nuxt-primevue',
    '@nuxt/eslint',
    '@vueuse/nuxt'
  ],
  css: ['~/assets/css/base.css', '/node_modules/primeicons/primeicons.css'],
  primevue: {
    options: {
      unstyled: true
    },
    importPT: { as: 'Aura', from: '~/presets/aura' }     //import and apply preset
  },
  imports: {
    dirs: ['stores'],
    presets: [
      {
        from: 'pinia',
        imports: ['storeToRefs']
      }
    ]
  }
})

Folder structure

| stores
--| user.ts

user.ts

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const useUserStore = defineStore('user', () => {
  const user = useStorage('user', { name: 'John Doe' })

  return {
    user
  }
})

Answer 1

OP thought that Pinia was not properly initialized, turns out you need to import a function in a component for it to appear in the devtools.

In their specific project, they did

<script setup>
import { useUserStore } from 'stores/user.js'

const userStore = useUserStore()
</script>