How to programmatically register components in script setup?

[itchwoot]

Hi!

With the options API, I can do a bulk import and register components from a destructured object:

<script>
import icons from '@my-ui-components/icons/all-icons.js';

export default {
    name: 'MyComponent',
    components: { ...icons },
}
</script>

How can I achieve this with <script setup>?

[liulinboyi]

You can use like this:

Before import you can check the js file export is default exports or named exports.

App.vue

<script setup>
import { ref } from 'vue'
import { HelloWorld } from './lib-es.js'

const msg = ref('This is from App')
</script>

<template>
  <HelloWorld :msg="msg" />
  <input v-model="msg" />
</template>

lib-es.js

import { ref as o, openBlock as r, createElementBlock as n, toDisplayString as t } from "vue";
const a = {
  __name: "HelloWorld",
  props: {
    msg: String
  },
  setup(e) {
    const l = o("Hello World!");
    return (s, c) => (r(), n("h1", null, t(e.msg || l.value), 1));
  }
};
export {
  a as HelloWorld
};

Demo link

[liulinboyi]

In your example, you don't destructure the icon.js components though. The problem isn't the import, I want to know how to programmatically register components in <script setup> without doing an explicit named import.

I tried again. It works fine. You can use like this.

The repo has updated:
liulinboyi/dynamic-component-vue.git

[itchwoot]

You are not using <script setup> inside of my-icon.vue. I already know this concept works with the options API.
I'm not saying your code doesn't work, but it doesn't solve my problem.

[liulinboyi]

You are not using <script setup> inside of my-icon.vue. I already know this concept works with the options API. I'm not saying your code doesn't work, but it doesn't solve my problem.

I see, If you really want to use <script setup> , you can use it like this😉:

<script setup>
import { computed } from "vue";
import icons from "./icon.js";
const props = defineProps({
  iconComponentName: {
    type: String,
    default: "Icon1",
  },
});

const components = icons;
const name = computed(() => {
  console.log(components, "components");
  const result = components[props.iconComponentName];
  console.log(result);
  return result;
});
</script>

<template>
  <component :is="name" />
</template>

The repo has updated.
https://github.com/liulinboyi/dynamic-component-vue

[liulinboyi]

You are not using <script setup> inside of my-icon.vue. I already know this concept works with the options API. I'm not saying your code doesn't work, but it doesn't solve my problem.

In fact, <script setup> is a compile-time syntactic sugar for using Composition API inside Single-File Components (SFCs).
https://vuejs.org/api/sfc-script-setup.html

[itchwoot]

Ahhh. With the computed prop, it works. Thank you! And thank you for your patience.

[itchwoot]

Solution:

<script setup>
import { computed } from "vue";
import icons from "./icon.js";
const props = defineProps({
  iconComponentName: {
    type: String,
    default: "Icon1",
  },
});

const actualComponentName = computed(() => {
  return icons[props.iconComponentName];
});
</script>