Numum Components Library

A collection of Vue 3 components with theme support

Installation

npm install @numum/shared-components

Setup

Basic Setup

import { createApp } from 'vue'
import { createNumum } from '@numum/shared-components'
import { setConfig } from '@numum/shared-components';
import '@numum/shared-components/styles'

const app = createApp(App)

// Set suffix for images
setConfig({
  imageSuffix: 'mobile'
});

createNumum(app, {
    theme: 'veloxa' // or 'rapides'
})
app.mount('#app')

Theme Configuration

Veloxa theme is used by default. To use Rapides theme:

// Import base styles
import '@numum/shared-components/styles'
// Import Rapides theme
import '@numum/shared-components/styles/themes/_rapides.scss'

Component Example

ButtonComponent

Basic button component with various style options

<template>
  <ButtonComponent type="rounded">Click me</ButtonComponent>
</template>

<script setup>
import { ButtonComponent } from '@numum/shared-components'
</script>

Composables

useImage

Hook for working with themed images

import { useImage } from '@numum/shared-components'

const { getImageUrl } = useImage()
const imageUrl = getImageUrl('my-image.jpg') 

Themes

Veloxa (default)

Main theme with blue color scheme:

• Primary color: #5FB2FF
• Secondary color: #FFB937
• No image suffix

Rapides

Alternative theme with green color scheme:

• Primary color: #55EA76
• Secondary color: #FBFF22
• Image suffix: __rapides

Development

Local Testing

For local development:

# In library directory
npm link

# In your project
npm link @numum/shared-components

Building

npm run build

License

MIT