Endare-vue-toolbox NPM

Endare Vue Toolbox

Library setup

Installation

npm install endare-vue-toolbox

Style

Import the Endare Vue Toolbox global stylesheet in the src/main.ts application entry point file.

import 'endare-vue-toolbox/style'

Components

EndareIcon
EndareButton
EndareCheckbox
EndareTextInput

Example:

<script setup lang="ts">
import { EndareButton } from 'endare-vue-toolbox'
</script>

<template>
  <EndareButton label="hello" />
</template>

EndareIcon

In order to use the EndareIcon component, you need to provide an icons configuration.

src/components/icons/HeartIcon.vue

<template>
  <path d="..." />
</template>

src/constants/icons.ts

import type { IconData } from 'endare-vue-toolbox/types'
import HeartIcon from 'src/components/icons/HeartIcon.vue'

export const ICONS: Record<string, IconData> = {
  heart: {
    component: HeartIcon,
    viewBox: '0 0 16 14'
  }
}

src/main.ts

import App from 'src/App.vue'
import { createApp } from 'vue'
import { setIconsConfig } from 'endare-vue-toolbox' // Added
import { ICONS } from 'src/constants/icons' // Added

const app = createApp(App)
app.use(setIconsConfig(ICONS)) // Added
app.mount('#app')

EndareCheckbox

In order to use the EndareCheckbox component, you need to provide a checkbox configuration.

src/main.ts

import App from 'src/App.vue'
import { createApp } from 'vue'
import { setCheckboxConfig } from 'endare-vue-toolbox' // Added

const app = createApp(App)
app.use(setCheckboxConfig({ iconName: 'heart', iconColors: ['#333'] })) // Added
app.mount('#app')