@amj7/lucide-patch-nativescript-vue

Patches lucide-vue-next to be used in NativeScript Vue 3 via @nativescript-community/ui-svg and @vue/server-renderer.

This package addresses compatibility issues between lucide-vue-next and NativeScript Vue 3 by:

• Applying a patch (lucide-vue-next+0.475.0.patch) to your project during the postinstall script.
• Providing a nativescript.webpack.js in the plugin that overrides imports of "vue" within @vue/server-renderer to point back to original vue.
• Enabling tree-shaking for lucide-vue-next icons in your NativeScript Vue 3 application.

StackBlitz Example

Installation

1. Install Peer Dependencies:

   1npm install @nativescript-community/ui-canvas @nativescript-community/ui-svg @vue/server-renderer

2. Install this Package:

   1npm install @amj7/lucide-patch-nativescript-vue

   The postinstall script will automatically apply the patch to your lucide-vue-next dependency (version ^0.475.0).

3. Register SVGView:

   In your app.js (or equivalent entry point):

   1import { registerElement } from "nativescript-vue";
   2
   3registerElement(
   4  "SVGView",
   5  () => require("@nativescript-community/ui-svg").SVGView
   6);

Usage

Refer to the Lucide Vue Next documentation for general usage instructions. This package ensures compatibility with NativeScript Vue 3.

1<script setup>
2import { Camera } from "lucide-vue-next";
3</script>
4
5<template>
6  <Camera color="red" :size="32" />
7</template>

1// Inherited css color supported! (v1.0.7) // Examples:
2<template>
3  <Camera class="text-black dark:text-white" />
4</template>
5
6<template>
7  <Page class="text-foreground">
8    ...
9    <Camera />
10  </Page>
11</template>

Props

Prop	Type	Default
size	number	24
color	string	currentColor
stroke-width	number	2
absolute-stroke-width	boolean	false
default-class	string	lucide-icon

---

---

---

Troubleshooting

• Verifying the Patch: Check if node_modules/lucide-vue-next/dist/esm/createLucideIcon.js has been modified. You should see a defineComponent call within the file. If the patch hasn't been applied, try running npm install again.

• TypeError: Vue.initDirectivesForSSR is not a function: This error indicates that the nativescript.webpack.js plugin was not applied correctly.

  • Manual Configuration: Add the webpack rule directly to your webpack.config.js file.

    1// webpack.config.js
    2const webpack = require("@nativescript/webpack");
    3const path = require("path");
    4
    5module.exports = (env) => {
    6  webpack.init(env);
    7
    8  webpack.chainWebpack((config) => {
    9    // Create a new rule for files coming from the specific package.
    10    config.module
    11      .rule("override-vue-for-server-renderer")
    12      .test(/\.(js|vue)$/)
    13      .include.add(
    14        path.resolve(__dirname, "node_modules", "@vue", "server-renderer")
    15      )
    16      .end()
    17      // Override the resolution so that any import of "vue" in @vue/server-renderer files points to the original Vue package
    18      .resolve.alias.set(
    19        "vue",
    20        path.resolve(__dirname, "node_modules/vue")
    21      );
    22  });
    23
    24  return webpack.resolveConfig();
    25};

• UnhandledSchemeError: Reading from "node:stream" is not handled:

  • If you're trying to use stream-browserify in your project, you might need to patch @vue/server-renderer/dist/server-renderer.cjs.js using npx patch-package or bun patch:

    1- const stream = new (require("node:stream")).Readable({ read() {
    2+ const stream = new (require("stream-browserify")).Readable({ read() {

    Bun tip

    If using Bun, there's a known bug that breaks bun patch with @scoped packages. So you'll need to use quotes around the package name and fix the file .patch filename manually to @vue+server-renderer@3.5.13.patch once done.

---

---