How to have a Nuxt.js and a bare Vue.js project share components

I want to create a website with two separate applications which share some components and store.

index is the public application where I want to use nuxt.js to have SSR.

admin should be a classic SPA where SSR is not needed.

My first idea was to create a multi-page vue application as described in the vue-cli docs at https://cli.vuejs.org/config/#pages

However I'm unsure if this feature fits my needs and if it's possible/advisable to have a nuxt.js app alongside a bare vue.js application, because nuxt.js has a different project structure.

Is there any way to configure nuxt.js so it fits in the default project structure of vue or to configure vue to use the nuxt.js folder structure?

Solution

Create multiple Vue Applications with (some) shared source-files (components/store/mixins/etc)

It is easily possible to share resources across multiple Vue-Apps simply by importing the respective resource everywhere you would like to use it, e.g.:

// in /components/MyComponent.vue
<template>
  <div>I'm a shared component</div>
<template>

// in /user-app/entry.js
import MyComponent from '../components/MyComponent';

Vue.component('MyComponent', MyComponent);
new Vue({...})

// in /admin-app/entry.js
import MyComponent from '../components/MyComponent';

Vue.component('MyComponent', MyComponent);
new Vue({...})

Where it becomes a little bit complicated

To actually create the seperate apps you will have to use some built-process. By far the most common tool to build Vue apps (and the one used by VueCLI & Nuxt) is WebPack.

To create multiple apps with WebPack you need to do one of two things:

simply use the integreated build-processes of the VueCLI and Nuxt separately. It will work out of the box.
create your own WebPack configuration & the EntryPoint of every single app in WebPack's configuration. NOTE: It is not trivial to use your own build-process for Nuxt, if you really want to use Nuxt I advice you against it. Run with two seperate build-processes instead.

The WebPack configuration itself is a JavaScript Object. The relevant key to declare your EntryPoints is sensibly called entry. Here you specify the name of your EntryPoint and the corresponding path (the path to the entry-file).

The 'Pages' feature of the VueCLI uses this under the hood. However, I believe it is very well worth it to learn how to use WebPack yourself. It is not that complex and will significantly benefit most or all of your JavaScript projects.

A basic example configuration could look like this:

// in webpack.config.js
module.exports = {
  mode: 'development',

  entry: {
    admin: path.resolve(__dirname, './admin-app.js'),
    user path.resolve(__dirname, './user-app.js'),
  },

  // other config
}

WebPack is very well documented: https://webpack.js.org/concepts/