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,

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

import MyCustomElement from './App'

export {
   MyCustomElement
}

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
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

Chris · Accepted Answer · 2020-01-25 06:21:40Z

4

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:

Build by

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

Add main at package.json

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

At main app, add component by

yarn add ../dummylib

Import and use the component

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

edited Jan 25, 2020 at 6:21

answered Jan 25, 2020 at 6:16

Chris

6522 gold badges10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sebin Simon Over a year ago

Can I use compiled JS in another PHP project like a jQUery plugin?

Vincenzo Over a year ago

Sorry, is it possible to dynamically import those components?

Chris Over a year ago

yes it should be possible, are you looking for vue component lazy loading? vueschool.io/articles/vuejs-tutorials/…

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related