Cannot load Pinia in Nuxt3

Question

I am trying to set up Nuxt3 to work with Pinia.

Steps Taken:

• Started with an active nuxt3 project
• ran npm install @pinia/nuxt
• this failed, with a dependency error, so re-ran with npm install @pinia/nuxt --legacy-peer-deps, which worked fine
• added pinia to my nuxt.config.ts, which now looks like:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    meta: {
        link: [
            {
                rel: "stylesheet",
                href:"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            }
        ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
      ]
    },
    ssr: false,
    buildModules: ['@pinia/nuxt'],
    base: '/',
})

• restarted the server
• got the following error:

GET http://localhost:3000/_nuxt/@id/pinia/dist/pinia.mjs net::ERR_ABORTED 404 (Not Found)

I've been googling around, and can't figure out what's broken here... I tried taking out the 'base' argument in nuxt.config.ts, and that didn't help either. If I take out the pinia declaration everything works fine.

Answer 1

Resolved by running: npm install pinia @pinia/nuxt @nuxtjs/composition-api --legacy-peer-deps

I guess I was missing the actual pinia library

Answer 2

In the Nuxt docs they suggest adding this to your package.json before running npm install:

"overrides": {
  "vue": "latest"
}