Skip to content

README.md

Latest commit

 

History

History
74 lines (48 loc) · 2.87 KB

README.md

File metadata and controls

74 lines (48 loc) · 2.87 KB
Raw

Atomium - Vue

This is the Vue transpiled implementation of the Atomium design system to be used in Vue projects.

The Vue wrappers are automatically generated by Stencil using the @stencil/vue-output-target, providing a seamless integration between Web Components and Vue with proper TypeScript support, event handling, and v-model binding.

Getting Started

Installation

npm i @juntossomosmais/atomium

Note: The @stencil/vue-output-target runtime is automatically installed as a dependency. You don't need to install it explicitly.

Basic Usage

<template>
  <AtomButton>Click me</AtomButton>
</template>

<script setup>
import '@juntossomosmais/atomium/core.css'
import { AtomButton } from '@juntossomosmais/atomium/vue'
</script>

Components self-register their custom elements on import. No plugin installation or loader setup is required.

Events

Stencil events (atomChange, atomClick, ...) are re-emitted as Vue component events, so the usual kebab-case template syntax works on the wrappers:

<AtomAlert action-text="Undo" @atom-action="handleAction" />

v-model

Form components (AtomInput, AtomTextarea, AtomSelect, AtomDatetime) support v-model, bound to the value prop and updated on atomChange:

<template>
  <AtomInput label="Name" v-model="name" />
</template>

<script setup>
import { ref } from 'vue'
import { AtomInput } from '@juntossomosmais/atomium/vue'

const name = ref('')
</script>

Available Components

All Atomium custom components (prefixed with atom-) are available as Vue wrappers. Ionic components are imported globally and can be used directly from @ionic/core if needed.

You could check the Vue components transpiled of Stencil in Vue Stories

Migrating from the ComponentLibrary plugin

The loader-based ComponentLibrary plugin was removed. Previously it registered all components lazily and converted camelCase custom events to kebab-case for raw custom-element tags.

  • Wrapper users: remove the ComponentLibrary.install() call (and its import). Nothing else changes — kebab-case event bindings on wrapper components keep working.
  • Raw <atom-*> tag users: migrate to the Vue wrappers (recommended), or keep raw tags and listen to the camelCase DOM events (@atomChange via v-on:atomChange, or addEventListener('atomChange', ...)), since the kebab-case event conversion no longer exists.

Architecture

For more details about the architecture decisions, see: