Problem Importing and Using a Vue Component in a Plugin

[Carlos-Alexandre-Leutz]

Hello everyone,

I'm facing an issue when trying to import and use a Vue component within a plugin. My Vue 3 project has the following structure:
I work on a large system, and we have a unique situation within our system. We are updating the application to use new technologies.

We have a back-end built with Laravel 4.2 using Blade for the front-end.

Due to the size of the system, we are creating plugins with Vue 3 to develop parts of the front-end incrementally.

We cannot refactor everything at once because it has not been approved by management and would take too long. Therefore, we are making updates gradually.

Due to the peculiarities of our project, I encountered this problem.

In the code provided in my GitHub repository, I replicated our issue.
https://github.com/Carlos-Alexandre-Leutz/erro-no-vue-3

I have a component that I use within a plugin made with Vue 3, but I also need to use this same component in another Blade page separately.

With Vue 2, everything worked fine. However, in Vue 3, when I create a main.js for Component 2, everything stops working, and no error is thrown.

Below is a detailed description of what I'm doing.

In summary, I am building the application and calling the scripts within an index.html file that simulates my Blade.

When I build only Component 1, everything works.
When I build both Component 1 and Component 2, nothing works.

But there is an important detail:

When I register a child component in Component 2, the problem occurs. If I do not register it, I can use Component 1 and Component 2 normally.

However, the components in my application have several child components within their respective Component 2, so I need help to resolve this issue.

my-project/
├── public/
│   ├── dist/
│   │   └── vue-3/
│   │       └── js/
│   │           ├── chunk-vendors.js
│   │           ├── comp_1.js
│   │           └── comp_2.js
├── src/
│   ├── Comp1/
│   │   ├── MyComponent.vue
│   │   └── main.js
│   ├── Comp2/
│   │   ├── MyComponent.vue
│   │   └── main.js
├── vue.config.js
├── package.json
├── index.html

In vue.config.js, I have configured multiple entries for comp_1 and comp_2:

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
productionSourceMap: false,
transpileDependencies: true,
filenameHashing: false,
outputDir: "./public/dist/vue-3",
pluginOptions: {
webpack: {
dir: ["./webpack"],
},
},
pages: {
comp_1: {
entry: "src/comp-1/main.js",
filename: "comp-1.html",
title: "comp-1",
},
// Comment on this section to see the project working
comp_2: {
entry: "src/comp-2/main.js",
filename: "comp-2.html",
title: "app_comp-2",
},
// Comment on this section to see the project working
},
});

The problem occurs when I try to import `Comp2` within `Comp1`. `Comp2` doesn't work and shows no errors in the console. Here is the relevant code from `Comp1`:

```vue
<template>
  <div>
    <h1>Item List</h1>
    <form @submit.prevent="addItem">
      <input v-model="newItem" placeholder="New item" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <v-comp-2></v-comp-2>
      </li>
    </ul>
  </div>
</template>

<script>
import Comp2 from "@/Comp2/launcherComponent.vue";

export default {
  components: {
    "v-comp-2": Comp2,
  },
  data() {
    return {
      newItem: '',
      items: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
  },
};
</script>

Additionally, I have a component that I'm using both as a component within another plugin and as a standalone plugin:

<template>
  <div class="iconr-launcher-container">
    ico
    <div
      href="#iconr-modal-galeria"
      :class="['iconr-launcher', statusClass]"
      :style="{ 'background-image': 'url(' + launcherThumb + ')' }"
      data-toggle="modal"
      @click="openIconr($event)"
    ></div>
  </div>
</template>
<script>
import { ref, computed } from "vue";

export default {
  props: {
    v_status: {
      type: String,
      default: "",
    },
    v_thumb: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    const gallery = ref(false);
    const galleryShortcutsEnabled = ref(false);

    const statusClass = computed(() => {
      return "iconr-status-" + props.v_status;
    });

    const launcherThumb = computed(() => {
      return props.v_thumb === null || props.v_thumb === "null"
        ? "/plugins/dist/iconr_placeholder.png"
        : props.v_thumb;
    });

    const openIconr = () => {
      gallery.value = true;
      galleryShortcutsEnabled.value = true;
    };

    return {
      gallery,
      galleryShortcutsEnabled,
      openIconr,
      statusClass,
      launcherThumb,
    };
  },
};
</script>

When I uncomment the style section, the component stops working and shows no errors.

Questions

1. Why is Comp2 not working when imported within Comp1?
2. How can I debug these issues?

Any help would be greatly appreciated! Thank you!

---

Additional Information

• Vue version: 3.x
• Build tools: Vue CLI

Relevant Code

https://github.com/Carlos-Alexandre-Leutz/erro-no-vue-3

---

With this detailed description, I hope to get help to resolve these issues. Thanks in advance for any guidance or solutions suggested.

Thank you!