-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
migration: update global mounting API usage
- Loading branch information
Showing
4 changed files
with
71 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { createApp } from 'vue' | ||
import { createStore } from './store' | ||
import { createRouter } from './router' | ||
import { sync } from 'vuex-router-sync' | ||
import titleMixin from './util/title' | ||
import App from './App.vue' | ||
import ProgressBar from './components/ProgressBar.vue' | ||
|
||
const store = createStore() | ||
const router = createRouter() | ||
|
||
sync(store, router) | ||
|
||
const app = createApp({ | ||
router, | ||
store, | ||
...App | ||
}) | ||
|
||
// global progress bar | ||
const bar = createApp(ProgressBar).mount('#progress-container') | ||
document.body.appendChild(bar.$el) | ||
app.config.globalProperties.$bar = bar | ||
|
||
// mixin for handling title | ||
app.mixin(titleMixin) | ||
|
||
// a global mixin that calls `asyncData` when a route component's params change | ||
app.mixin({ | ||
beforeRouteUpdate(to, from, next) { | ||
const { asyncData } = this.$options | ||
if (asyncData) { | ||
asyncData({ | ||
store: this.$store, | ||
route: to | ||
}) | ||
.then(next) | ||
.catch(next) | ||
} else { | ||
next() | ||
} | ||
} | ||
}) | ||
|
||
// Add router hook for handling asyncData. | ||
router.beforeResolve((to, from, next) => { | ||
const matched = router.getMatchedComponents(to) | ||
const prevMatched = router.getMatchedComponents(from) | ||
let diffed = false | ||
const activated = matched.filter((c, i) => { | ||
return diffed || (diffed = prevMatched[i] !== c) | ||
}) | ||
const asyncDataHooks = activated.map((c) => c.asyncData).filter((_) => _) | ||
if (!asyncDataHooks.length) { | ||
return next() | ||
} | ||
|
||
bar.start() | ||
Promise.all(asyncDataHooks.map((hook) => hook({ store, route: to }))) | ||
.then(() => { | ||
bar.finish() | ||
next() | ||
}) | ||
.catch(next) | ||
}) | ||
|
||
// actually mount to DOM | ||
app.mount('#app') |
a6e0c9a
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Migrate the app mounting to use Vue 3 API. We are merging the previous
entry-client.js
andapp.js
into a single file since the separation was only for SSR purposes.The main change is that instead of
new Vue
, we now create an app instance withcreateApp
. Global mixins are now applied to the app instance withapp.mixin
instead of usingVue.mixin
.router.onReady
usage is also removed.router.onReady
won't fire after we migrate to Vue 3'screateApp
since the root instance isn't created untilapp.mount
is called, which in turn won't trigger the ready state of the router. The usage of router.onReady was for SSR purpose anyway, so we can safely remove it here.Docs: https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp