Using a prop in an import statement in Vue, using Laravel and Inertia?

Question

I'm trying to dynamically load only specific icons from the lucide-vue-next package in my vue page, however it's not wanting to work. I'm using Laravel 12 (Latest), Vue3 (Latest shipped with Laravel), and Inertia.js (Latest shipped with Laravel)

My controller code:

$races = Race::with('skills', 'trait')->get();
$raceIcons = 'Sparkles'; //implode(',', $races->pluck('icon')->toArray());
return Inertia::render('game/character/Create', ['races' => $races, 'races_icons' => $raceIcons]);

My vue code:

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Head, useForm, usePage } from '@inertiajs/vue3';

const page = usePage();
const raceIcons = computed(() => page.props.races_icons); // With or without .value at the end of the statement before the ;
console.log(raceIcons);
...
</script>

<script lang="ts">
    import { raceIcons } from 'lucide-vue-next';
</script>

I'm getting the error: Uncaught ReferenceError: raceIcons is not defined

The component isn't loaded when I try to do this dynamically, however when I call:

import { Sparkles } from 'lucide-vue-next';

It works just fine. Is there any way I can get this to work? I really don't want to load absolutely every single lucide icon on every page.

Apologies, I'll try to clear things up. I have to <script> tags purely to test. The third component is just an example of what works - I can import specific icons when naming them manually. raceIcons is provided by the Inertia backend. — Jon
– Jon, Commented yesterday
This can be XY problem. For dynamic import name, you could use (await import('lucide-vue-next'))[page.props.races_icons]. But this will disable tree shaking and forcedly include the whole library — Estus Flask
– Estus Flask, Commented 23 hours ago

Fazle Ryan · Accepted Answer · 2025-12-01 18:24:43Z

Yeah, that’s not how imports work, and Lucide isn’t psychic.

<script setup lang="ts">
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { Sparkles, Sword, Shield } from 'lucide-vue-next'; // only what you actually use

const page = usePage();

// e.g. "Sparkles", "Sword", etc. coming from Laravel
const iconName = computed(() => page.props.races_icons as string);

const iconsMap = {
  Sparkles,
  Sword,
  Shield,
} as const;

// pick the right component (fallback to Sparkles)
const CurrentIcon = computed(
  () => iconsMap[iconName.value as keyof typeof iconsMap] ?? Sparkles,
);
</script>

<template>
  <component :is="CurrentIcon" class="w-5 h-5" />
</template>

What went wrong in your version:

import { raceIcons } from 'lucide-vue-next' is looking for a named export literally called raceIcons. It does not care about your computed raceIcons string.
You also mixed <script setup> with a second <script> block and shadowed the same name, so the template never sees what you think it sees.

If you really want “any” icon by string and don’t care about bundle size, you can do:

import * as Lucide from 'lucide-vue-next';

const CurrentIcon = computed(
  () => (Lucide as any)[iconName.value] ?? Lucide.Sparkles,
);

But that pulls basically all icons into your bundle. The map approach is the sane one.

Collectives™ on Stack Overflow

Using a prop in an import statement in Vue, using Laravel and Inertia?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related