Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global mounting/configuration API change #29

Merged
merged 5 commits into from Nov 12, 2019
Merged

Global mounting/configuration API change #29

merged 5 commits into from Nov 12, 2019

Conversation

@yyx990803
Copy link
Member

yyx990803 commented Apr 9, 2019

Before

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

new Vue({
  render: h => h(App)
}).$mount('#app')

After

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp()

app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount(App, '#app')

Rendered

@Kocal

This comment has been minimized.

Copy link

Kocal commented Apr 9, 2019

Nice, mutating Vue app instances instead of global Vue instance is SO much better! 👍

@jacekkarczmarczyk

This comment has been minimized.

Copy link

jacekkarczmarczyk commented May 30, 2019

Is there a reason for initializing app with the component? I'd see rather something like

import { createApp } from 'vue'
import App1 from './App1.vue';
import App2 from './App2.vue';

const app = createApp();
app.use(...);
...

app.mount('#app-1', App1);
app.mount('#app-2', App2);

That would allow to reuse the app object in some cases (but still you can create separate apps if you don't want to share anything)

@ycmjason

This comment has been minimized.

Copy link

ycmjason commented May 30, 2019

@jacekkarczmarczyk

But conceptually shouldn't app contains only one "app"?

app.mount('#app-1', App1);
app.mount('#app-2', App2);

This seems rather counter intuitive. Perhaps it's the naming.

If you wish to use the same config in both apps, I reckon you can do something like:

import { createApp } from 'vue'
import App1 from './App1.vue';
import App2 from './App2.vue';

const createMyApp = (component) => {
  const app = createApp(component);

  app.config.ignoredElements = [/^app-/]
  app.use(/* ... */)
  app.mixin(/* ... */)
  app.component(/* ... */)
  app.directive(/* ... */)

  return app
};

createMyApp(App1).mount('#app-1');
createMyApp(App2).mount('#app-2');

In this case you gain more flexibility too over what config to use on each app.

@MichMich

This comment has been minimized.

Copy link

MichMich commented May 30, 2019

Are the app methods chainable? It would be great if we could write:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
  .mixin(/* ... */)
  .component(/* ... */)
  .directive(/* ... */)
  .mount('#app')

And since I don't use the igoneElements feature, this could be simplified to:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
  .use(/* ... */)
  .mixin(/* ... */)
  .component(/* ... */)
  .directive(/* ... */)
  .mount('#app')
@jacekkarczmarczyk

This comment has been minimized.

Copy link

jacekkarczmarczyk commented May 30, 2019

@ycmjason I'm not sure whether an app should handle only one app, but that's also the point of discussion. But you're right that if it can handle more apps than the naming might be a subject to change

In this case you gain more flexibility too over what config to use on each app.

I don't agree with this, because my propsal allows you to use a separate apps/configs or shared one depending on your needs, your solution still doesn't allow to share the config.


Another question (not related to this topic) is where do we put Vuex or Router here?
app.mount('#app', { store }) or createApp(App, { store }) or we don't do it here at all?

@MichMich

This comment has been minimized.

Copy link

MichMich commented May 30, 2019

For me it would make more sense to use:

createApp({ store, router })
  .use(/* ... */)
  .mixin(/* ... */)
  .component(/* ... */)
  .directive(/* ... */)
  .mount('#app', App)
@yyx990803

This comment has been minimized.

Copy link
Member Author

yyx990803 commented Nov 6, 2019

This RFC is now in final comments stage. An RFC in final comments stage means that:

  • The core team has reviewed the feedback and reached consensus about the general direction of the RFC and believe that this RFC is a worthwhile addition to the framework.
  • Final comments stage does not mean the RFC's design details are final - we may still tweak the details as we implement it and discover new technical insights or constraints. It may even be further adjusted based on user feedback after it lands in an alpha/beta release.
  • If no major objections with solid supporting arguments have been presented after a week, the RFC will be merged and become an active RFC.
yyx990803 added 2 commits Nov 8, 2019
- remove config.productionTip
- replace config.ignoredElements with config.isCustomElement
@yyx990803 yyx990803 merged commit bed289b into master Nov 12, 2019
Copy link

cuongdevjs left a comment

Cool

@Akryum

This comment has been minimized.

Copy link
Member

Akryum commented Nov 22, 2019

Was thinking this will allow the devtools to inject a proper Vue app into the page instead of hand-made DOM manipulations (for the Component overlay for example).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.