Vuejs - Vue App build as component for other project's vue router

Question

Im trying to build a vue app for other vue project's to be use as a component for the app vue router. Here is my simple project structure for start,

|-- my-app
    |-- lib
        |-- my-app-component <-- folder copied from (my-app-component's dist)
    |-- App.vue
    |-- app.js
    |-- package.json



|-- my-app-component
    |-- dist
    |-- App.vue
    |-- app.js
    |-- package.json

Here is the idea and steps that I'm trying to implement,

1. build my-app-component as reusable component, the code at my-app-component->app.js is

import MyCustomElement from './App'

export {
   MyCustomElement
}

2. Copy the dist folder to my-app's lib folder, this is just temporary solution, will be further improve using Lerna and yarn workspaces once I manage to solve the current problem
3. Import my-app-component from lib at my-app's lib, the code at my-app -> app.js is,

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import MyAppComponent from '@lib/my-app-component'

const routes = [
  {
    name: 'MyAppComponent',
    path: '/',
    component: MyAppComponent
  }
]

const router = new VueRouter({
  routes
})
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

Based on this steps, I can't seem to import the component successfully. Im building my component using vue-cli-service build command

Answer 1

Seems to found the answer here...

https://itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

I have been answering my own question these days, is stack overflow still alive?

Solution:

1. Build by

vue-cli-service build --target lib --name dummylib src/main.js

2. Add main at package.json

"main": "./dist/dummylib.common.js",

3. At main app, add component by

yarn add ../dummylib

4. Import and use the component

import DummyButton from 'dummylib'
export default {
  name: 'app',
  components: {
    'dummy-button' : DummyButton
  }
}