@myevery/nuxt-ui v0.3.0

My UI - Nuxt

This repository contains the Nuxt version (a layer) of My UI with ready to use components (form inputs, buttons, cards, etc.) that you can use to build your project.

Installation

pnpm install -D @myevery/nuxt-ui

Note: This also installs the My UI Tailwind CSS package and required nuxt modules:

• @nuxtjs/tailwindcss
• @nuxtjs/color-mode
• @vueuse/nuxt
• nuxt-icon

Usage

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '@myevery/nuxt-ui'
  ]
})

Configuration

Nuxt app.config.ts

This is the app configuration for

My UI components

Note: It's not a module configuration, so you must define it in app.config.ts, not in nuxt.config.ts.

export default defineAppConfig({
  /**
   * My UI layer configuration
   */
  nui: {
    /**
     * Default shape for components
     * 
     * This allows to not have to specify the shape prop on every component.
     * Define only the ones you want to override.
     */
    defaultShapes: {
      /**
       * Default shape for the BaseAccordion component
       *
       * @type {'straight' | 'rounded' | 'curved'}
       */
      accordion: 'rounded',
      /**
       * Default shape for the BaseAutocompleteItem component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      autocompleteItem: 'rounded',
      /**
       * Default shape for the BaseAvatar component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      avatar: 'full',
      /**
       * Default shape for the BaseButton component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      button: 'rounded',
      /**
       * Default shape for the BaseButtonAction component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      buttonAction: 'rounded',
      /**
       * Default shape for the BaseButtonIcon component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      buttonIcon: 'rounded',
      /**
       * Default shape for the BaseButtonIcon component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      buttonClose: 'full',
      /**
       * Default shape for the BaseCard component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      card: 'rounded',
      /**
       * Default shape for the BaseDropdown component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      dropdown: 'rounded',
      /**
       * Default shape for the BaseIconBox component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      iconBox: 'rounded',
      /**
       * Default shape for all input components component
       * - BaseAutocomplete
       * - BaseCheckbox
       * - BaseInput
       * - BaseInputFile
       * - BaseInputListbox
       * - BaseInputSelect
       * - BaseInputTextarea
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      input: 'rounded',
      /**
       * Default shape for the BaseMessage component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      message: 'curved',
      /**
       * Default shape for the BasePagination component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      pagination: 'rounded',
      /**
       * Default shape for the BaseProgress component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      progress: 'full',
      /**
       * Default shape for the BaseProse component
       *
       * @type {'straight' | 'rounded' | 'curved'}
       */
      prose: 'rounded',
      /**
       * Default shape for the BaseTabSlider component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      tabSlider: 'rounded',
      /**
       * Default shape for the BaseTag component
       *
       * @type {'straight' | 'rounded' | 'curved' | 'full'}
       */
      tag: 'rounded',
    },
  },
})

Tailwind tailwind.config.ts

import { withMyUI } from '@myevery/tailwind'
import colors from 'tailwindcss/colors'

/**
 * My UI tailwind configuration
 */
export default withMyUI({
  content: [],
  theme: {
    /**
     * Customize fonts
     * 
     * You must load them yourself
     * (ex: with unplugin-fonts)
     */
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      heading: ['Inter', 'sans-serif'],
      alt: ['Karla', 'sans-serif'],
      mono: ['ui-monospace', 'monospace'],
    },
    extend: {
      /**
       * Customize colors 
       * 
       * Use tailwind predefined colors,
       * or generate your own with tools like https://tailwindshades.com
       */
      colors: {
        // Define only the ones you want to override
        muted: colors.slate,
        primary: colors.violet,
        info: colors.sky,
        success: colors.teal,
        warning: colors.amber,
        danger: colors.rose,
      },
    },
  },
})