@atoms-studio/nuxt-components

Atoms UI Kit / 🎨 Components

Unstyled components that cover most common UI patterns.
Uses Vite in lib mode to build for production.
Uses Vitest to run unit tests.

Installation

yarn add @atoms-studio/nuxt-components

Then in your Nuxt 3 project you should import your Nuxt component like this:

<template>
  <div class="wrapper-image-component">
    <AppPicture
        :image="image"
        :focal-point="focalPoint"
        :base64="base"
        sizes="md:500px xl:100vw"
    />
  </div>
</template>

<script>
import '@atoms-studio/nuxt-components/dist/style.css'
import { AppPicture } from '@atoms-studio/nuxt-components'

export default {
  components: {
    AppPicture,
  },
  data() {
    return {
      image: {
        url: 'https://images.ctfassets.net/w2dr5qwt1rrm/2QTfowm3D2kbkTdoUTtTv2/57fc815c23c0be887f44675413372580/LAxBR_2020.11.12_Final_Product_KV_RVB.jpg',
        width: 2500,
        height: 1236,
      },
      focalPoint: {
        x: 1264,
        y: 677,
      },
      base: 'data:image/jpeg;base64,/9j/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAIABADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIE/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAEDAhETMTP/xAAUAQEAAAAAAAAAAAAAAAAAAAAD/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAMAwEAAhEDEQA/AN80aeqyMDt0QAEM/9k=',
    }
  },
}
</script>

Development

• Components must be written in Typescript
• You can use templates or render functions as you please.
• You can use composables from the 📦 Composables package.
• You can use Options API, Composition API, <script setup> as you see fit.
• Every component must have a unit test suite in the tests folder named after it, ie: test/<componentName>.test.ts.
  
• Every component must have an example app in the ℹ️ Examples package.
• Every component must have an E2E test that consumes the example app.

To execute unit tests, run yarn test in the packages/nuxt-components folder.