@limetech/lime-elements-vue

Vue 3 wrapper for Lime Elements web components.

Table of Contents

• Features
• Installation
• Usage
  • Composition API
  • Options API
  • CSS Styles
  • ESLint Configuration
• Available Components
• v-model Support
  • Supported Components
  • Example Usage
• Development
  • Prerequisites
  • Setup
  • Build
  • Clean
• Project Structure
• License

Features

• Tree-shaking: Import only the components you use (~50-300KB each vs 4.7MB full bundle)
• No layout shift: Components load eagerly (synchronous), not lazily
• TypeScript support: Full type hints in PHPStorm/WebStorm
• v-model support: Two-way binding for toggle components (switch, checkbox)

Installation

npm install @limetech/lime-elements-vue

Usage

Import components individually for optimal bundle size.

Composition API

<script setup lang="ts">
import { ref } from 'vue';
import LimelButton from '@limetech/lime-elements-vue/limel-button';
import LimelSwitch from '@limetech/lime-elements-vue/limel-switch';

const enabled = ref(false);
const handleClick = () => console.log('clicked');
</script>

<template>
  <LimelButton label="Click me" :primary="true" @click="handleClick" />
  <LimelSwitch v-model="enabled" label="Enable feature" />
</template>

Options API

<script lang="ts">
import { defineComponent } from 'vue';
import LimelButton from '@limetech/lime-elements-vue/limel-button';
import LimelSwitch from '@limetech/lime-elements-vue/limel-switch';

export default defineComponent({
  components: { LimelButton, LimelSwitch },
  data() {
    return { enabled: false };
  },
});
</script>

CSS Styles

Import styles in your main entry file:

// main.ts
import '@limetech/lime-elements-vue/styles/lime-elements.css';

// Optional: Extended color palette
import '@limetech/lime-elements-vue/styles/color-palette-extended.css';
// Or light mode only:
// import '@limetech/lime-elements-vue/styles/color-palette-extended-light-mode-only.css';

ESLint Configuration (Recommended)

To ensure components are always imported (and catch missing imports at build time):

// eslint.config.js
import pluginVue from 'eslint-plugin-vue';
import vueTsEslintConfig from '@vue/eslint-config-typescript';

export default [
  ...pluginVue.configs['flat/essential'],
  ...vueTsEslintConfig(),
  {
    files: ['**/*.vue'],
    rules: {
      'vue/no-undef-components': 'error',
    },
  },
];

Available Components

All Lime Elements components are available as subpath imports:

import LimelButton from '@limetech/lime-elements-vue/limel-button';
import LimelCheckbox from '@limetech/lime-elements-vue/limel-checkbox';
import LimelSwitch from '@limetech/lime-elements-vue/limel-switch';
import LimelDialog from '@limetech/lime-elements-vue/limel-dialog';
import LimelInputField from '@limetech/lime-elements-vue/limel-input-field';
import LimelSelect from '@limetech/lime-elements-vue/limel-select';
// ... and many more

v-model Support

Vue's v-model directive provides two-way data binding. This library supports v-model for toggle components, allowing you to bind reactive state directly.

Supported Components

| Component | v-model type | Bound property | |-----------|--------------|----------------| | LimelSwitch | boolean | value | | LimelCheckbox | boolean | checked |

Example Usage

<script setup lang="ts">
import { ref } from 'vue';
import LimelSwitch from '@limetech/lime-elements-vue/limel-switch';
import LimelCheckbox from '@limetech/lime-elements-vue/limel-checkbox';

const switchValue = ref(false);
const checkboxValue = ref(false);
</script>

<template>
  <div>
    <p>Switch is: {{ switchValue ? 'ON' : 'OFF' }}</p>
    <LimelSwitch v-model="switchValue" label="Toggle me" />
  </div>

  <div>
    <p>Checkbox is: {{ checkboxValue ? 'checked' : 'unchecked' }}</p>
    <LimelCheckbox v-model="checkboxValue" label="Check me" />
  </div>
</template>

Without v-model, you can use the traditional prop + event pattern:

<LimelSwitch 
  :value="switchValue" 
  label="Toggle me" 
  @change="(e) => switchValue = e.detail" 
/>

Development

Prerequisites

• Node.js 18+
• Python 3.8+ (for build script)

Setup

git clone --recurse-submodules https://github.com/Lundalogik/@limetech/lime-elements-vue.git
cd @limetech/lime-elements-vue
npm install

Build

npm run build

Clean

npm run clean

Project Structure

@limetech/lime-elements-vue/
├── lime-elements/        # Git submodule (Stencil source)
├── src/
│   └── index.ts          # Main entry
├── config/
│   └── stencil.config.vue.ts
├── scripts/
│   ├── build-per-component.js
│   ├── generate-explicit-types.js
│   ├── generate-subpath-exports.js
│   └── post-process.js
├── dist/                 # Build output
│   ├── index.esm.js
│   ├── limel-button/     # Per-component bundles
│   ├── limel-switch/
│   └── ...
├── build.py              # Build orchestrator
└── package.json

License

Apache-2.0