vue-components-chakra-ui

Configurando no projeto

Após instalação da biblioteca você deverá instalar as fontes no index.html que está localizado no arquivo ./public .

Fonte

Insira dentro da tag head

 <link rel="preconnect" href="https://fonts.googleapis.com"> 
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
 <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">

Setando uso da biblioteca no VUE

Vá para o arquivo main.js que fica localizado na pasta ./src e insira o codigo abaixo

import Chakra, { CThemeProvider, CReset } from '@chakra-ui/vue'
import {customStyle} from 'vue-components-chakra-ui' 
Vue.use(customStyle)
Vue.use(Chakra, {extendTheme: customStyle})
new Vue({el: '#app',render: (h) => h(CThemeProvider, [h(CReset), h(App)])}).$mount()

Muito importante inserir o CThemeProvider e CReset.

Componentes

A Biblioteca oferece os coponentes customStyle e H1~H6

customStyle

É a customização da biblioteca Chakra UI Vue, criado para nossos projeto , onde será utilizado na propriedade extendTheme do Chakra, localizado no main.js

Propriedades customizadas

colors: { primario: '#1A72FF', primarioLight: '#7DB1FF', primarioDark: '#0058E6', secundario: '#FE9E4D', secundarioLight: '#FFBA7F', secundarioDark: '#FD821B', gradientePrimarioClaroEscuro: 'linear-gradient(45deg, #7DB1FF, #1A72FF)', gradientePrimarioEscuroClaro: 'linear-gradient(45deg,#1A72FF, #7DB1FF )', gradienteSecundarioClaroEscuro: 'linear-gradient(45deg, #FFBA7F, #FE9E4D)', gradienteSecundarioEscuroClaro: 'linear-gradient(45deg,#FE9E4D, #FFBA7F )', }

H1~H6

Componentes criados para utilização das tags semanticas h1~h6 , para inserir os dados no componente é necessário o atributo texto

Exemplo de uso dos componentes H1~H6

<template>
  <div id="app">
    <H1 texto="teste"/>
  </div>
</template>
<script>
import {H1} from 'vue-components-chakra-ui'
export default {
  name: 'App',
  components: {
    H1
  }
}
</script>
<style>
</style>