@chakra-ui/nuxt
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    @chakra-ui/nuxt

    Chakra UI Module for Nuxt.js

    Looking for documentation?

    See Documentation site here

    Setup

    1. Add @chakra-ui/nuxt dependency to your project
    yarn add @chakra-ui/nuxt @nuxtjs/emotion
    1. Add @chakra-ui/nuxt & @nuxtjs/emotion to the modules section of nuxt.config.js
    // nuxt.config.js
    export default {
      modules: [
        '@chakra-ui/nuxt',
        '@nuxtjs/emotion'
      ],
      /**
       * Add extend the plugin options under the `chakra` key.
       **/
      chakra: {
        extendTheme: {
          colors: {
            brand: { /* ... */ }
          }
        }
      }
    }
    1. 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>

    Development

    1. Clone this repository
    2. Install dependencies using yarn bootstrap
    3. Start development server using yarn dev

    License

    MIT License

    Copyright (c) Kelvin Omereshone kelvinomereshone@gmail.com

    Keywords

    none

    Install

    npm i @chakra-ui/nuxt

    DownloadsWeekly Downloads

    856

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    19.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828