@bedard/vue-forward
v1.1.13
Published
The missing createApp function from Vue 2.7
Downloads
64
Readme
@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...
- Refactor from
new Vue(...)
tocreateApp(...)
- Migrate anything else that isn't forward-compatible, see here →
- 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)