Chakra UI Nuxt

💚 We all love Nuxt 3! Getting started with Chakra UI Nuxt is also just as simple.


If you wish to use Chakra UI Vue with Nuxt, you will have to install the @Chakra-ui/nuxt-next package. This package will install all the required dependencies.

pnpm install @chakra-ui/nuxt-next


yarn add @chakra-ui/nuxt-next

Registering the Chakra module

We then register the Chakra UI module in the modules key of our nuxt.config.tsSee the Nuxt documentation to learn more about modules in Nuxt.js

Chakra module options are the same as the Vue CLI plugin options. Learn more about the Chakra plugin options here.

//nuxt.config.tsexport default {  modules: [    '@chakra-ui/nuxt-next',  ],  /**
   * Add extend the plugin options under the `chakra` key.
   **/  chakra: {    extendTheme: {      colors: {        brand: { /* ... */ }      }    }  }}

That is it! 🚀 You can now use the Chakra UI components and features in your Nuxt application.


Here is a Nuxt 3 Github repo that contains a starter for Chakra UI Nuxt:

Edit this page on GitHub