lime-elements-vue

Vue 3 wrapper for @limetech/lime-elements web components.

Installation

npm install lime-elements-vue

Usage

1. Configure Vite (Required)

Add this to your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // Tell Vue that all tags with a hyphen are custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    }),
    // Copy lime-elements ESM files to assets folder
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@limetech/lime-elements/dist/esm/*',
          dest: 'assets/'
        }
      ]
    })
  ],
  optimizeDeps: {
    // Don't pre-bundle lime-elements to allow dynamic imports to work
    exclude: ['@limetech/lime-elements']
  }
})

Install the required plugin:

npm install -D vite-plugin-static-copy

2. Register the plugin globally

Important: Set resourcesUrl to match where you copied the files in your Vite config.

import { createApp } from 'vue'
import { LimeElementsVue } from 'lime-elements-vue'
import App from './App.vue'

const app = createApp(App)

// Match this to your viteStaticCopy dest path
app.use(LimeElementsVue, {
  resourcesUrl: '/assets/'  // Must match the 'dest' in viteStaticCopy config
})

app.mount('#app')

3. Use components in your templates

<template>
  <div>
    <limel-button label="Click me" @click="handleClick" />
    <limel-input-field v-model="value" label="Enter text" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

Configuration Options

Development vs Production

• Development: The default resourcesUrl points to /node_modules/@limetech/lime-elements/dist/ which works with Vite's dev server
• Production: You must configure resourcesUrl to match where you copy the assets using vite-plugin-static-copy

Alternative: Copy to different location

If you prefer a different location:

// In vite.config.ts
viteStaticCopy({
  targets: [
    {
      src: 'node_modules/@limetech/lime-elements/dist/esm/*',
      dest: 'lime-elements/'  // Custom destination
    }
  ]
})

// In your app
app.use(LimeElementsVue, {
  resourcesUrl: '/lime-elements/'  // Must match!
})

Using a CDN

app.use(LimeElementsVue, {
  resourcesUrl: 'https://your-cdn.com/lime-elements/'
})

Available Components

This package provides Vue 3 wrappers for all lime-elements components. For detailed documentation on each component, please refer to the lime-elements documentation.

Troubleshooting

404 errors for component files

If you see 404 errors like GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found):

1. Check your resourcesUrl - It must match the dest path in viteStaticCopy config
2. Ensure you're copying the right files - Use dist/esm/* not just dist
3. Include trailing slash - resourcesUrl: '/assets/' not /assets
4. Configure Vite properly:
   • optimizeDeps.exclude: ['@limetech/lime-elements']
   • isCustomElement: (tag) => tag.includes('-')

Development mode 404 errors

For development, either:

• Use the default (no resourcesUrl option) which points to /node_modules/@limetech/lime-elements/dist/
• Or configure Vite's server to serve node_modules

License

MIT