lime-elements-vue 1.0.7 → 1.0.8

package/README.md

@@ -0,0 +1,129 @@
+# lime-elements-vue
+
+Vue 3 wrapper for [@limetech/lime-elements](https://github.com/Lundalogik/lime-elements) web components.
+
+## Installation
+
+```bash
+npm install lime-elements-vue
+```
+
+## Usage
+
+### 1. Configure Vite (Required)
+
+Add this to your `vite.config.ts`:
+
+```typescript
+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 assets to your public folder
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/@limetech/lime-elements/dist',
+          dest: 'lime-elements'
+        }
+      ]
+    })
+  ],
+  optimizeDeps: {
+    // Don't pre-bundle lime-elements to allow dynamic imports to work
+    exclude: ['@limetech/lime-elements']
+  }
+})
+```
+
+**Install the required plugin:**
+
+```bash
+npm install -D vite-plugin-static-copy
+```
+
+### 2. Register the plugin globally
+
+```typescript
+import { createApp } from 'vue'
+import { LimeElementsVue } from 'lime-elements-vue'
+import App from './App.vue'
+
+const app = createApp(App)
+// Point to the copied assets
+app.use(LimeElementsVue, {
+  resourcesUrl: '/lime-elements/dist/'
+})
+app.mount('#app')
+```
+
+### 3. Use components in your templates
+
+```vue
+<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>
+```
+
+## Development vs Production
+
+The default `resourcesUrl` is set to `/node_modules/@limetech/lime-elements/dist/` which works in **development mode only**.
+
+For production builds, you **must** use `vite-plugin-static-copy` as shown above to copy the assets and configure the `resourcesUrl` option.
+
+## Advanced Configuration
+
+### Custom Resource URL
+
+If you're serving from a CDN:
+
+```typescript
+app.use(LimeElementsVue, {
+  resourcesUrl: 'https://your-cdn.com/lime-elements/dist/'
+})
+```
+
+## 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](https://lundalogik.github.io/lime-elements/).
+
+## Troubleshooting
+
+### 404 errors for component files in development
+
+If you see 404 errors like `GET http://localhost:xxxx/limel-checkbox.entry.js 404 (Not Found)` in development:
+
+1. The default resourcesUrl should work with Vite's dev server
+2. Ensure `optimizeDeps.exclude: ['@limetech/lime-elements']` is set
+3. Make sure `isCustomElement: (tag) => tag.includes('-')` is configured
+
+### 404 errors in production build
+
+You must copy the assets using `vite-plugin-static-copy` and configure the `resourcesUrl` option when installing the plugin.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,3 +1,10 @@
 export * from './components';
 import type { Plugin } from 'vue';
+export interface LimeElementsVueOptions {
+    /**
+     * Custom URL for lime-elements resources.
+     * If not provided, will attempt to load from node_modules
+     */
+    resourcesUrl?: string;
+}
 export declare const LimeElementsVue: Plugin;

package/dist/index.js

@@ -1,9 +1,14 @@
 export * from './components';
 import { applyPolyfills, defineCustomElements } from '@limetech/lime-elements/dist/loader';
 export const LimeElementsVue = {
-    async install() {
+    async install(_app, options) {
         applyPolyfills().then(() => {
-            defineCustomElements();
+            // Set a default resourcesUrl that points to node_modules
+            // This works in dev mode with Vite
+            const resourcesUrl = options?.resourcesUrl || '/node_modules/@limetech/lime-elements/dist/';
+            defineCustomElements(window, {
+                resourcesUrl
+            });
         });
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lime-elements-vue",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Vue 3 wrapper for @limetech/lime-elements web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",