Chakra UI Module for Nuxt.js
- Add
@nuxtjs/chakrauidependency to your project
yarn add @nuxtjs/chakraui # or npm install @nuxtjs/chakraui- Add
@nuxtjs/chakrauito themodulessection ofnuxt.config.js
{
modules: [
// Simple usage
'@nuxtjs/chakraui',
]
}- Wrap your default layout in
layouts/directory inside CThemeProvider as seen in the Chakra UI docs to start consuming Chakra Components. Like so:
<template>
<c-theme-provider>
<c-reset/>
<Nuxt/>
</c-theme-provider>
</template>
<script>
import {
CThemeProvider,
CReset,
CButton
} from "@chakra-ui/vue";
export default {
name: 'DefaultLayout',
components: {
CThemeProvider,
CReset,
}
};
</script>- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
Copyright (c) Kelvin Omereshone kelvinomereshone@gmail.com