Error while requiring module @chakra-ui/nuxt: TypeError: Vue.observable is not a function

[Daniel Madalitso Phiri]

Describe the bug
I have a fresh install of Chakra UI on a Nuxt 3.4 app and when i add @chakra-ui/next to the nuxt.config.ts i get the error Error while requiring module @chakra-ui/nuxt: TypeError: Vue.observable is not a function

To Reproduce
Steps to reproduce the behavior:

1. Create a new Nuxt.js project
2. Install Chakra UI by following instructions here
3. Create layouts/default.vue and add an <h1> hello </h1>
4. Delete <NuxtWelcome /> in app.vue

Expected behavior
The page should display hello, do i can go on and add chakra layout components

Screenshots

Desktop (please complete the following information):

• OS: MacOS 13.2.1
• Browser: Chrome
• Version: 112

Additional context
There are also somw TypeScript errors when I add this snippet

chakra: {
    extendTheme: {
      colors: {
        brand: { /* ... */ }
      }
    }
  }

I get an error message that says Object literal may only specify known properties, and 'chakra' does not exist on type 'Nuxt Config'.

[Cristian Campos]

Same here!

[Aprila Hijriyan]

+1

[mainee]

+1

[/ Tri]

+1

[im_codebreaker]

• 1

[Cameron]

+1

[Faurest]

+1

[KamilPolok]

+1