[Vuejs]-Vue.js project structure for two SPA applications with shared components

Here is an example using ES6 modules (you can use webpack’s modules for sure, but i prefer this way). For example you have this structure

/assets
/-js
/--components
/---shared
/---admin
/---b2c
/--directives
/--stores
/--models
/b2c.js
/admin.js

So in your b2c.js you need to use it in this way.

import Vue from 'Vue';

import component from './components/shared/SomeComponent.vue';

/*or var component = require('./components/shared/SomeComponent.vue'); if you want to use webpack here*/

import b2cOnly   from './components/b2c/SomeComponent.vue';

let app = new Vue({
  el: '#app',
  components: {component, b2cOnly}
});

And similar admin.js

import Vue from 'Vue';

import component from './components/shared/SomeComponent.vue';

import adminOnly   from './components/admin/SomeComponent.vue';

let app = new Vue({
  el: '#app',
  components: {component, adminOnly}
});

Then you can easily bundle it with vue-loader (or vueify if you using browserify, like i am https://github.com/vuejs/vueify)

http://vue-loader.vuejs.org/en/start/tutorial.html

Here is an example of webpack.config.js from docs

// webpack.config.js
module.exports = {
  // other options ...
  module: {
loaders: [
  {
    // use vue-loader for *.vue files
    test: /\.vue$/,
    loader: 'vue'
  },
  {
    // use babel-loader for *.js files
    test: /\.js$/,
    loader: 'babel',
    // important: exclude files in node_modules
    // otherwise it's going to be really slow!
    exclude: /node_modules/
  }
]
},
  // if you are using babel-loader directly then
  // the babel config block becomes required.
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  }
}

Then, you can include yours compiled admin.js and b2c.js somewhere in your project.