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')

Project setup

Requirements

• Node.js

Local development environment setup

1. Install dependencies using NPM

npm install

2. Compile and serve the application with hot-reload using Vite

npm run start

Linting and formatting

Lint code using ESLint

npm run lint

Format code using Prettier

npm run format

Project build

1. Build the application using Vite

npm run build

2. Serve the application build using Vite

npm run preview-build

3. Publish the build to NPM

npm publish