vue-cli SSR

main.backup.js

// Existing imports
import Vue from 'vue'
import router from './router'
import store from './store'

// Other existing code here

// Add 'app' variable
const app = new Vue({
  // Existing options
  router,
  store,
  provide: apolloProvider.provide(),
})

main.js

// Existing imports
import Vue from 'vue'
// Transform router import
import { createRouter } from './router'
// Transform store import
import { createStore } from './store'

// Inject import
import nuxt from 'nuxt'

// Generate createApp func
export default function createApp(context) {
  // Generate createAppContext
  const appContext = new nuxt.createAppContext(context)
  
  // Generate create statements
  const router = createRouter(context)
  const store = createStore(context)

  // Other existing code here

  // Add 'app' variable
  const app = new Vue({
    // Existing options
    router,
    store,
    provide: apolloProvider.provide(),

    // Inject root option
    ...appContext.rootOptions()
  })

  // Detect router, vuex, ...
  // Used in servery entry for pre-fetching
  appContext.use({
    router,
    store,
    apolloProvider
  })

  // Generate return
  return {
    app,
    appContext
  }
}

router.backup.js

// Existing imports
import Vue from 'vue'
import VueRouter from 'vue-router'

// Existing Vue.use
Vue.use(VueRouter)

const router = new VueRouter({
  // Existing options
})

export default router

router.js

// Existing imports
import Vue from 'vue'
import VueRouter from 'vue-router'

// Existing Vue.use
Vue.use(VueRouter)

// Wrap in function
export function createRouter (context) {
  const router = new VueRouter({
    // Existing options
  })
  
  // Generate return
  return router
}

store.backup.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // Existing options
})

export default store

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore (context) {
  const store = new Vuex.Store({
    // Existing options
  })

  return store
}

@atinux it seems doable to me with recast. createAppContext may run nuxt plugins.

We would need:

• wrapInExportedFunction - takes all the non-imports and non-Vue.use() code and put it in a function with the const appContext = new nuxt.createAppContext(context) statement at the beginning and the return { app, appContext } statement at the end.
• assignToVariable - adds const app = before new Vue().
• generateAppContextUse - detects router, store, etc. in the scope and generates the appContext.use() statement after the new Vue statement.

And we would need to change the router as well:

• replace import router from 'XXX' with import { createRouter } from 'XXX'
• modify the file targeted by the above import with wrapInExportedFunction to generate the createRouter function.

Same for store.

Also we could modify every vuex module to change state to a function.