nuxt-uibox v0.0.1-beta

nuxt-uibox

Componentes Vue para uso personal con Nuxt

Instalar

yarn add @nuxtjs/composition-api vue-lazyload nuxt-uibox

Requisitos

Es necesario que el proyecto nuxt cuente con las siguientes configuraciones nuxt.config.js

{
  components: [
    ...
    '~/node_modules/nuxt-uibox/Core',
    '~/node_modules/nuxt-uibox/Elements', 
    '~/node_modules/nuxt-uibox/Icons' *
  ],
  publicRuntimeConfig: {
    /** OPTIONAL **/
    UIBox: {
      Heading: {
        color: { light: 'black', dark: 'white' }
      }
    }
  }
}

La propiedad dark solo está disponible si se usa @nuxtjs/color-mode

/Icons. Es una colección de algunos iconos de vue-unicons. Para cargar todos los iconos, instale yarn add @iconscout/vue-unicons, luego reemplace nuxt-uibox/Icons por '~/node_modules/@iconscout/vue-unicons/icons'

...

layouts/default.vue

<template>
  <UIBox>
    <Alert/>
    <Prompt/>
    <Nuxt/>
  </UIBox>
</template>

CSS

Para aplicar colores a los componentes es necesario establecer las variables en formato RGB sin su función, en el archivo css principal. Ejemplo: assets/css/main.css

:root {
  --nuxt-uibox-color-primary: 15, 43, 230;
  --nuxt-uibox-color-secondary: 230, 101, 15;
  --nuxt-uibox-color-accent: 180, 186, 228;
  --nuxt-uibox-color-black: 2, 7, 38;
  --nuxt-uibox-color-white: 255, 255, 255;
  --nuxt-uibox-color-gray: 184, 184, 184;
  --nuxt-uibox-color-graylight: 224, 224, 224;
  --nuxt-uibox-color-yellow: 230, 216, 15;
  --nuxt-uibox-color-blue: var(--nuxt-uibox-color-primary);
  --nuxt-uibox-color-red: 230, 15, 43;
  --nuxt-uibox-color-green: 15, 230, 43;

  /** rotateplane | bounce **/
  --nuib-loading-animation: rotateplane .8s infinite alternate;
}