Could not find injected layout when using v-app-bar component

[ATLCode]

Took me a while to track down what was causing this, but here with quite a fresh project I was able to replicate it.

The Issue
After fresh install of nuxt and just adding pinia and vuetify-nuxt-module to the project using <v-app-bar></v-app-bar> component from vuetify in any page or component will cause app to crash and result following error:

ℹ Error: obj.hasOwnProperty is not a function

 ⁃ at shouldHydrate (C:/Main Data/Dev/test-app/node_modules/pinia/dist/pinia.mjs:1205:40)

   1200 ┃   *
   1201 ┃   * @param obj - target variable
   1202 ┃   * @returns true if obj should be hydrated
   1203 ┃   */
   1204 ┃  function shouldHydrate(obj) {
 ❯ 1205 ┃      return !isPlainObject(obj) || !obj.hasOwnProperty(skipHydrateSymbol);
   1206 ┃  }
   1207 ┃  const { assign } = Object;
   1208 ┃  function isComputed(o) {
   1209 ┃      return !!(isRef(o) && o.effect);
   1210 ┃  }

Obviously the error mentions pinia, so the issue might be on their end as well and apologies if I'm reporting at the wrong place. However I figured since the error didn't seem to occur with pinia install alone and everything works fine otherwise, but just crashes when using vuetify component that it might be caused by vuetify-module.

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.10.1",
    "nuxt": "^3.16.2",
    "pinia": "^3.0.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
    "vuetify-nuxt-module": "^0.18.6"
  },
  "devDependencies": {
    "sass-embedded": "^1.86.3"
  }
}

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  ssr: true,
  modules: ["@pinia/nuxt", "vuetify-nuxt-module"],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      /* vuetify options */
    },
  },
});

[userquin]

can you provide a minimal reproduction 🙏 ?

[ATLCode]

can you provide a minimal reproduction 🙏 ?

Here is reproduction https://github.com/ATLCode/test-app

Tried without pinia and still causes crash, but this time maybe the error message is more useful. I put the v-app-bar in this case straight to app.vue, but tried it in the index page as well to confirm same result.

[Vuetify] Could not find injected layout

at useLayoutItem (C:/Main Data/Dev/test-app/node_modules/vuetify/lib/composables/layout.js:43:22)
at Object.setup [as _setup] (C:/Main Data/Dev/test-app/node_modules/vuetify/lib/components/VAppBar/VAppBar.js:97:48)
at setup (C:/Main Data/Dev/test-app/node_modules/vuetify/lib/util/defineComponent.js:28:43)
at callWithErrorHandling (C:/Main Data/Dev/test-app/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19)
at setupStatefulComponent (C:/Main Data/Dev/test-app/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25)
at setupComponent (C:/Main Data/Dev/test-app/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36)
at renderComponentVNode (C:/Main Data/Dev/test-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:645:15)
at ssrRenderComponent (C:/Main Data/Dev/test-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)
at _sfc_ssrRender (C:/Main Data/Dev/test-app/app.js:11:53)
at renderComponentSubTree (C:/Main Data/Dev/test-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:715

I should have done this to begin with, sorry about that.

[AndreyYolkin]

Wrap your application into v-app before using layout-related components.

[ATLCode]

Wrap your application into v-app before using layout-related components.

That seems to work. Thank you and my bad for incorrect setup. Now that I check it does say in vuetify's getting started section about this.