Sharing assets and components between Vue projects

Question

I have 2 Vue applications and they both need to use some common pages and assets (scss files, icons etc.).

The pages they need to share are full pages with access to vuex store and async calls.

What I think to do is to create a single vue app (with the cli) and put both the apps in it and have a shared folder:

vue-project
   - src
     - app1
     - app2
     - shared

But then I have a problem: How do I build/run each app separately?

Answer 1

UPDATE 2022

The solution I offer below is valid but it's hard to manage and adding new projects is very involved.

Today there are many monorepo tools that are better at managing these types of projects:

1. nx
2. yarn workspaces

these are just a couple of options but many more exist

ORIGINAL POST

So this is what I ended up doing:

• I've created this structure

   vue-project
       - node_modules
       - src
         - app1
         - app2
         - shared
  

• All node modules are under vue-project, so they are shared

• Not mandatory, but I defined aliases for the different projects:

   ...
   "@app1": path.resolve(__dirname, "src/app1"),
   "@app2": path.resolve(__dirname, "src/app2"),
   "@shared": path.resolve(__dirname, "src/shared/components")
   ...
  

• It's important to note, that when creating the aliases you should add the '@' symbol, or else you might get unexpected results. For me, before I added it, it was loading resources from app2 even though I used the alias of app1

• I've created these scripts in package.json:

   "serve:app1": "vue-cli-service serve --port 3000 --open  src/app1/main.js",
   "serve:app2": "vue-cli-service serve --port 3001 --open  src/app2/main.js",
   "build:app1": "vue-cli-service build --dest dist/console src/app1/main.js",
   "build:app2": "vue-cli-service build --dest dist/tm src/app2/main.js"
  

And that's basically it, I now have 2 separate vue apps running and sharing components, store modules, and pages.