Build scalable and accessible Vue.js applications with ease

yarn add @chakra-ui/vue emotion

npm install @chakra-ui/vue emotion

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

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

Vue.use(Chakra)

new Vue({
  el: '#app',
  render: (h) => h(App)
}).$mount()

<template>
  <ThemeProvider>
    <CSSReset />

    <!--
      Your application code goes here! ?
    -->
  </ThemeProvider>
</template>

<script>
  import { ThemeProvider, CSSReset } from '@chakra-ui/vue'

  export default {
    name: 'App',
    components: {
      ThemeProvider,
      CSSReset
    }
  }
</script>

<template>
  <ThemeProvider>
    <CSSReset />

    <!--
      Your application code goes here! ?
    -->
    <button variantColor="blue">
      Chakra consumed ⚡️
    </button>
  </ThemeProvider>
</template>

<script>
  import { ThemeProvider, CSSReset, Button } from '@chakra-ui/vue'

  export default {
    name: 'App',
    components: {
      ThemeProvider,
      CSSReset,
      Button
    }
  }
</script>

yarn install
yarn bootstrap
yarn dev