Usage with Nuxt.js

💚 We all love Nuxt.js! Getting started with Nuxt.js is also just as simple.

Installation#

With Nuxt.js we need to install the @nuxtjs/emotion package to enable your component styles to be generated and injected in the server build.

yarn add @chakra-ui/nuxt @nuxtjs/emotion

npm install @chakra-ui/nuxt @nuxtjs/emotion

Registering the Chakra module#

We then register the Chakra UI module in the modules key of our nuxt.config.js. 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.

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

Finally, setup Chakra's Theme Provider.#

We then wrap our layouts in the layouts/ directory inside the CThemeProvider component so that all your Chakra UI components can access the theme object.

Great! Now you can start consuming Chakra components!

<template>
  <CThemeProvider>
    <CReset />
    <Nuxt />
    <CButton as="nuxt-link" to="/">
      ⚡️ Oh, my Nuxt!
    </CButton>
  </CThemeProvider>
</template>

<script>
import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue'

export default {
  name: 'DefaultLayout',
  components: {
    CThemeProvider,
    CReset,
    CButton
  }
}
</script>

Nuxt codesandbox starters#

Here's a link to sample component starter with Nuxt.js

• Nuxt Starter
• Gridsome Starter

Storybook Components#

You can also view all developed components in Storybook!