title: Vuejs - Vue App build as component for other project's vue router
body: <p>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,</p>
  
  <pre><code>|-- my-app
      |-- lib
          |-- my-app-component &lt;-- folder copied from (my-app-component's dist)
      |-- App.vue
      |-- app.js
      |-- package.json
  
  
  
  |-- my-app-component
      |-- dist
      |-- App.vue
      |-- app.js
      |-- package.json
  
  </code></pre>
  
  <p>Here is the idea and steps that I'm trying to implement,</p>
  
  <ol>
  <li>build <strong>my-app-component</strong> as reusable component, the code at <strong>my-app-component->app.js</strong> is </li>
  </ol>
  
  <pre><code>import MyCustomElement from './App'
  
  export {
     MyCustomElement
  }
  </code></pre>
  
  <ol start="2">
  <li>Copy the dist folder to <strong>my-app</strong>'s <strong>lib</strong> folder, this is just temporary solution, will be further improve using Lerna and yarn workspaces once I manage to solve the current problem</li>
  <li>Import <strong>my-app-component</strong> from lib at <strong>my-app</strong>'s <strong>lib</strong>, the code at <strong>my-app -> app.js</strong> is,</li>
  </ol>
  
  <pre><code>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: '&lt;App/&gt;'
  })
  
  </code></pre>
  
  <p>Based on this steps, I can't seem to import the component successfully.
  Im building my component using <strong>vue-cli-service build</strong> command</p>