Chakra UI Nuxt

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

Installation

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

or

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.ts. See 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.

Starters

Here is a Nuxt 3 Github repo that contains a starter for Chakra UI Nuxt: https://github.com/codebender828/chakra-nuxt-v1-demo.