@bedard/vue-forward

Behold, the missing createApp function from Vue 2.7!

Forward compatibility is key to migrating large, complex codebases. Vue 2.7 provides many 3.x features, but it's missing the critical createApp function. This project implements that function, allowing you to minimize the diff on a migration branch.

A typical migration might look like this...

1. Refactor from new Vue(...) to createApp(...)
2. Migrate anything else that isn't forward-compatible, see here →
3. Upgrade to 3.1 and remove this library 🎉

Now that we know the plan, npm install @bedard/vue-forward

Getting started

A core concept in Vue 3 is the application instance. It's responsible for the root component and registering any globals. Here we'll use it to create a component tree and mount it to the DOM.

import { createApp } from '@bedard/vue-forward'

const app = createApp(App)
  .use(router)
  .mixin(i18n)

app.mount('#app')

For any root props or event listeners, we'll use the same naming conventions as Vue 3.

createApp(User, {
  username: 'bob',
  onClick() {
    // ...
  },
})

Attach to the DOM using mount. This uses 3.x mouting behavior, inserting as a child node rather than replacing the target.

app.mount('#target')

Call unmount to destroy the instance. Once unmounted, an app cannot be mounted again.

app.unmount()

Vuex & Vue Router

Use createStore and createRouter to create a forward compatible stores and routers.

import { createApp, createRouter, createStore, createWebHistory } from '@bedard/vue-forward'

const router = createRouter({
  history: createWebHistory(),
  routes: [ ... ],
})

const store = createStore({
  state: { ... }
})

createApp(App)
  .use(store)
  .use(router)

License

MIT