bridge icon indicating copy to clipboard operation
bridge copied to clipboard

App.vue support for bridge ?

Open pi0 opened this issue 4 years ago β€’ 7 comments

We can support an alias of layouts/default.vue ~> App.vue to make bridge projects even closer to nuxt 3.

/cc @Atinux Wdyt?

pi0 avatar Oct 05 '21 15:10 pi0

Not really sure about this since App is always applied for Nuxt 3.

We could patch Nuxt 2 App.js to use something like this.app instead of 'div' here: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/App.js#L46

But I am quite sure this will create plenty of issues :grimacing:

atinux avatar Oct 05 '21 15:10 atinux

What are breaking changes you think users would face when migrating App.vue (as layout in bridge) to App.vue in nuxt 3?

pi0 avatar Oct 05 '21 15:10 pi0

I think the usage will be different, I think that for Nuxt Bridge user they will have to use <slot> in order to display the layout/page (https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/App.js#L73-L81).

Where in Nuxt 3 they will directly use <NuxtPage/> inside, but I think it may be worth to try :grinning:

atinux avatar Oct 05 '21 16:10 atinux

Indeed usage will be different as nuxt 2 API is different (and bridge is attempting to only make it closer to nuxt 3)

We might try to auto-register a nuxt-3 compatible <NuxtPage> (as well as NuxtLayout component that can be used within App.vue.

This way users can progressively get closer to nuxt 3 without breaking changes of vue 3:

  • Start migrating CSS from nuxt.config to App.vue
  • Use the new layouts system with scoped slots and <NuxtLayout>

But indeed there might be unseen issues at least currently thinking of:

  • We cannot combine bridge's App.vue with layouts/ !

pi0 avatar Oct 05 '21 16:10 pi0

I think that this is definitely something we should try anyway since it will ease the migration.

I just want to be more confident about the usage of NuxtPage with NuxtLayout when we start gathering feedback ☺️

atinux avatar Oct 05 '21 21:10 atinux

Currently I use ln -s ../app.vue default.vue as a workaround.

MartinX3 avatar Jul 13 '22 21:07 MartinX3

@Atinux I tried today to reimplement basic version of app.vue, currently without <NuxtPage /> and <NuxtLayout /> https://github.com/AndreyYolkin/poc-appvue-module

This is done by addind extra templates: vueApp loader for both of builders and App.js template replacement. Thanks to flexibility we have now πŸš€ I'll appreciate if you do a quick look at playground: https://codesandbox.io/s/github/AndreyYolkin/poc-appvue-module

AndreyYolkin avatar Feb 05 '23 00:02 AndreyYolkin