N
Nuxt•3mo ago
pook1574

Nuxt 4 config

Does my config look ok for Nuxt 4, just upgraded from 3. I can't seem to get Pina working in the devtools. 
// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from 'node:url';

export default defineNuxtConfig({
  srcDir: 'app',
  future: {
    compatibilityVersion: 4,
  },
  ssr: false,
  app: {
    baseURL: '/app/',
  },
  alias: {
    '@': fileURLToPath(new URL('./app', import.meta.url)),
    '~': fileURLToPath(new URL('./app', import.meta.url)),
    '@types': fileURLToPath(new URL('./app/types', import.meta.url)),
    '@config': fileURLToPath(new URL('./app/config', import.meta.url)),
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler',
        paths: {
          '@/*': ['./app/*'],
          '~/*': ['./app/*'],
          '@types': ['./app/types/index.ts'],
          '@types/*': ['./app/types/*'],
          '@config/*': ['./app/config/*'],
        },
      },
    },
  },
  runtimeConfig: {
    public: {
      djangoApiBase: process.env.DJANGO_API_BASE || 'http://localhost:8080/api',
      djangoApiV2Base:
        process.env.DJANGO_API_V2_BASE || 'http://localhost:8080/api/v2',
    },
  },
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt',
    'vuetify-nuxt-module',
    '@nuxt/eslint',
    '@pinia/nuxt',
    '@vee-validate/nuxt',
  ],

  vuetify: {
    moduleOptions: {
      /* module specific options */
      prefixComposables: true,
    },
    vuetifyOptions: './vuetify.config.ts',
  },
  css: ['~/assets/scss/main.scss'],
});
// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath } from 'node:url';

export default defineNuxtConfig({
  srcDir: 'app',
  future: {
    compatibilityVersion: 4,
  },
  ssr: false,
  app: {
    baseURL: '/app/',
  },
  alias: {
    '@': fileURLToPath(new URL('./app', import.meta.url)),
    '~': fileURLToPath(new URL('./app', import.meta.url)),
    '@types': fileURLToPath(new URL('./app/types', import.meta.url)),
    '@config': fileURLToPath(new URL('./app/config', import.meta.url)),
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler',
        paths: {
          '@/*': ['./app/*'],
          '~/*': ['./app/*'],
          '@types': ['./app/types/index.ts'],
          '@types/*': ['./app/types/*'],
          '@config/*': ['./app/config/*'],
        },
      },
    },
  },
  runtimeConfig: {
    public: {
      djangoApiBase: process.env.DJANGO_API_BASE || 'http://localhost:8080/api',
      djangoApiV2Base:
        process.env.DJANGO_API_V2_BASE || 'http://localhost:8080/api/v2',
    },
  },
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt',
    'vuetify-nuxt-module',
    '@nuxt/eslint',
    '@pinia/nuxt',
    '@vee-validate/nuxt',
  ],

  vuetify: {
    moduleOptions: {
      /* module specific options */
      prefixComposables: true,
    },
    vuetifyOptions: './vuetify.config.ts',
  },
  css: ['~/assets/scss/main.scss'],
});
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @pook1574. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your Nuxt 4 config looks generally correct for a Nuxt 4 project, and you are using the recommended way to enable Pinia with the @pinia/nuxt module in your modules array. Your use of aliases, runtimeConfig, and other options also aligns with Nuxt 4 documentation Nuxt Configuration Nuxt Configuration API. Regarding Pinia not showing in DevTools: - Your config enables devtools, which is required:
  devtools: { enabled: true }
  
  devtools: { enabled: true }
- You have @pinia/nuxt in your modules, which is correct for Nuxt 4 Pinia Migration. - Your config uses srcDir: 'app', which is fine, but note that in Nuxt 4, the default location for Pinia stores is inside the app/stores directory, not just stores at the project root. Make sure your stores are in app/stores if you use srcDir: 'app' Pinia Store Path Update. Common reasons Pinia does not appear in DevTools: 1. Store Not Imported/Used:
Pinia stores only appear in DevTools if they are actually imported and used in a component or plugin. If you haven't called your store (e.g., useUserStore()) in any component, it won't show up in DevTools. This is a common source of confusion Stack Overflow - Pinia store does not initialise. 2. DevTools/Pinia Tab Issues:
There have been some issues with the Pinia tab in Nuxt DevTools, especially around Nuxt 3.14 and later. Sometimes the tab shows "no data" or is unstable. This is a known issue and may not be related to your config Github Issue - Pinia tab is broken in 3.14. What to check: - Make sure you are importing and using your Pinia store in at least one component, for example: 
  <script setup>
  import { useUserStore } from '@/stores/user'
  const userStore = useUserStore()
  </script>
  
  <script setup>
  import { useUserStore } from '@/stores/user'
  const userStore = useUserStore()
  </script>
- If your stores are in app/stores (with srcDir: 'app'), your import should be from '@/stores/yourStore'. - If you still don't see Pinia in DevTools, it may be a DevTools bug rather than a config issue. Summary:
Your config is correct for Nuxt 4 and Pinia. The most likely reason Pinia is not showing in DevTools is that your store is not being used in any component, or you are encountering a known DevTools issue. Try importing and using your store in a component, and check again. If the problem persists, it may be a DevTools bug and not a misconfiguration on your part. Let me know if you need help with the store file structure or usage examples! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@636587234191212554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?