Nueva Handbook

Base components are reused very often and are often part of other components, they barely stand alone. They are subdevided into common and forms components. All components inside the base folder and its subfolders must be prefixed with "Base" (e.g. BaseIcon).

# Directory Structure

Naming Convention

Use prefix Base on all components inside this folder and sub-folders.

/components/
    /base/
        /common/
        /forms/
1
2
3
4

# Common Components

Common components are very components that are mostly very small components that are either custom implementations of HTML-Elements (e.g. BaseButton, BaseLink) or components that are consumed by other components (e.g. BaseLink).

  • BaseButton - Standard HTML Button, can be used like one.
  • BaseIcon - Gets a SVG-icon from the sprite sheet.
  • BaseLink - Regular HTML link, or nuxt-link if internal.
  • BaseLoader - Visual loader for components, can be controlled by a single prop loading.
  • BaseSiteLoader - Fullscreen loader for pages, can be used for loading property in nuxt.config.

# Form Components

Form components are custom implementations of HTML form elements with label and error state, ready to be used.

  • BaseAlert - Visual feedback for users about form status. Usually shown after form submission. Three possible states: success, warning, error.
  • BaseCaptcha (BACKLOG) - reCaptcha
  • BaseDateInput (BACKLOG) - Date picker, single or with range. With label and error.
  • BaseInput - Custom input with label and error.
  • BaseNumberInput (BACKLOG) - Number input with and without stepper. With label and error.
  • BaseOptionsInput - Custom input radio/checkbox (single/multiple) with label and error.
  • BaseRangeSlider (BACKLOG) - Value and range slider. With label and error.
  • BaseSelect - Custom select (single and multiselect). With label and error.
  • BaseTextarea - Custom textarea with label and error.