Help to create basic Vue3 plugin with nested components

[uwla]

I'm trying to build a Vue3 plugin but I faced some bugs and need help, please.

The bug is: nested components of the plugin are not resovled by Vue when they are imported from node modules in another application.

In order to reproduce this bug, I created a demo app and a demo plugin:

• vue plugin
• demo application using the plugin

The repositories contain instructions to set up the plugin and the demo app (very basic stuff, just run a few commands).

By running the demo app as specified, it is possible to see that the inner components of the plugin are not resolved by Vue, so they are not rendered neither mounted.

If more details are missing, just ask.

[uwla]

I think was a mistake from my part not having provided enough description, just the url of the app.

So, here is what is going on:

runtime-core.esm-bundler.js:41 [Vue warn]: resolveComponent can only be used in render() or setup().

Vue does not render my-innyer-component

Here is the HTML displayed in the browser:

<div id="app" data-v-app="">
  <h1>Vue3 Plugin Demo App</h1>
  <p>This is the demo
    app.</p>
  <div>
    <h1>This is the outer component</h1>
    <myinnercomponent msg="awesome, it works!"></myinnercomponent>
  </div>
</div>

Here is App.vue:

<template>
  <h1>Vue3 Plugin Demo App</h1>
  <p>This is the demo app.</p>
  <my-outer-component msg="awesome, it works!" />
</template>

<script>
export default {
  name: 'App'
}
</script>

Here is main.js:

import { createApp } from 'vue'
import plugin from 'vue3-plugin'
import App from './App.vue'

const app = createApp(App)
app.use(plugin)
app.mount('#app')

Here is MyOuterComponent.vue:

<template>
  <div>
    <h1>This is the outer component</h1>
    <MyInnerComponent :msg="msg" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import MyInnerComponent from './MyInnerComponent.vue';

export default defineComponent({
  name: 'OuterComponent',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  components: { MyInnerComponent }
});
</script>

Here is MyInnerComponent.vue:

<template>
  <div>
    <h2>This is the inner component</h2>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'MyInnerComponent',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
});
</script>

[Shyam-Chen]

Just import directly:

import { InnerComponent, OuterComponent } from 'my-lib';

[uwla]

I need to use MyOuterComponent, which itself uses MyInnerComponent.

Just import directly:

The users of the plugin must not need to use MyInnerComponent directly, because otherwise the plugin makes nosense if the user has to implement the logic within MyOuterComponent.

MyOuterComponent is an abstraction that represents the components which will be expose to the user. Usually, these are just a few components, or even a single one.

MyInnerComponent is an abstraction that represents auxiliary components used internally by the plugin, to handle implementation logic which should be hidden from the user. Usually, there are many of this kind.

[Shyam-Chen]

Use app.component:

import OuterComponent from 'path/to/OuterComponent.vue';
import InnerComponent from 'path/to/InnerComponent.vue';

  install(app, options) {
    // configure the app
    app.component('OuterComponent', OuterComponent);
    app.component('InnerComponent', InnerComponent);
  },

[uwla]

I am already doing so:

src/main.ts

import MyOuterComponent from './MyOuterComponent.vue';
import MyInnerComponent from './MyInnerComponent.vue';

export default {
  install: (app: any) => {
    app.component('MyInnerComponent', MyInnerComponent);
    app.component('MyOuterComponent', MyOuterComponent);
  },
};

but it is not working

[TonhaoSantos]

Assuming the scenario that you published this component in some repository and pointed out the main correctly in package.json, follow my install file:

import components from './components/index.js';

const plugin = {
  install(Vue) {
    for (const prop in components) {
      if (Object.prototype.hasOwnProperty.call(components, prop)) {
        const component = components[prop];
        Vue.component(component.name, component);
      }
    }
  },
};

export default plugin;

The components file has this content:

import ComponentOne from '@components/ComponentOne .vue';
import ComponentTwo from '@components/ComponentTwo .vue';

export default { NbGradientText, NbHighlightSelectedText };

I use rollup to build, you can see the whole process in this repo of my OpenSource Project.

[uwla]

This is not working for me ...

I changed src/main.ts to:

import MyOuterComponent from './MyOuterComponent.vue';
import MyInnerComponent from './MyInnerComponent.vue';

const components : any = { MyOuterComponent, MyInnerComponent };

const plugin = {
    install(Vue: any) {
        for (const prop in components) {
            if (Object.prototype.hasOwnProperty.call(components, prop)) {
                const component = components[prop];
                Vue.component(component.name, component);
            }
        }
    },
};

export default plugin;

This is the plugin package.json

{
  "name": "vue3-plugin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build --target lib --name VuePlugin src/main.ts"
  },
  "main": "dist/VuePlugin.umd.js",
  "dependencies": {
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  }
}

The demoapp's package.json:

{
  "name": "vue3-plugin-demoapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.2.13",
    "vue3-plugin": "file:../vue3-plugin"
  },
  "devDependencies": {
    "@vue/cli-service": "~5.0.0"
  }
}

Notice the plugin is installed locally via the filesystem.

However, it does not render the plugin:

  <div>
    <h1>This is the outer component</h1>
    <myinnercomponent msg="awesome, it works!"></myinnercomponent>
  </div>

[uwla]

Thanks for mentioning rollup! It helped me find the solution.

I had it in mind that vue-cli-service was creating another instance of Vue, but I wanted to avoid migrating from vue-cli-service because I will have to change dependencies and config of already existing packages, which may break thinks. Nonetheless, this is the way to go: use modern tech, rollup, instead of the legacy vue-cli-service

[uwla]

I solved the issue by migrating from vue-cli-service to vite with rollup.

That is all: vue-cli-service -> vite.

Here is the new package.json:

{
  "name": "vue3-plugin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "main": "./dist/vue3-plugin.cjs",
  "module": "./dist/vue3-plugin.js",
  "exports": {
    ".": {
      "import": "./dist/vue3-plugin.js",
      "require": "./dist/vue3-plugin.cjs"
    }
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

Here is vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/main.ts',
      name: 'vue3-plugin',
      fileName: 'vue3-plugin',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

Here is main.ts

import MyOuterComponent from './MyOuterComponent.vue'
import MyInnerComponent from './MyInnerComponent.vue'

export default {
    install(Vue: any) {
        Vue.component('my-inner-component', MyInnerComponent)
        Vue.component('my-outer-component', MyOuterComponent)
    },
}