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/vue emotion @nuxtjs/emotion

Plugin setup#

Create a file in your plugins/ directory. For this example, we'll call it chakra.js. In here we shall import Vue and register the plugin.

// chakra.js
import Vue from 'vue'
import Chakra from '@chakra-ui/vue'

Vue.use(Chakra)

We then add the Chakra plugin's file path in the plugins key of our nuxt.config.js. See the Nuxt documentation to learn mroe about plugins in Nuxt.js

export default {
  plugins: ['~/plugins/chakra']
}

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="/my-other-page">
      ⚡️ Oh, my Nuxt!
    </CButton>
  </CThemeProvider>
</template>

<script>
import {
  name: 'DefaultLayout',
  CThemeProvider,
  CReset,
  CButton
} from "@chakra-ui/vue";

export default {
  name: "App",
  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!