I am working on developing a Vue app that can be used as a component for other Vue projects in the app's Vue router. To start, here is my simple project structure:
|-- 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 are the idea and steps I am trying to implement:
- Build my-app-component as a reusable component. The code in my-app-component->app.js is
import MyCustomElement from './App'
export {
MyCustomElement
}
- Copy the dist folder to the lib folder of my-app. This is just a temporary solution and will be improved using Lerna and yarn workspaces once I solve the current issue.
- Import my-app-component from lib in my-app's lib. The code in 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/>'
})
Despite following these steps, I am struggling to successfully import the component. I am building my component using the vue-cli-service build command.