feat: Allow using the layouts folder to customize the app root instead of app.vue

[Jordan-Ellis]

🆒 Your use case

When creating a multi platform project (e.g. with web, electron, and ionic), I need to use completely different layouts depending on the project. I do this by changing the layouts dir in my nuxt config depending on the platform I'm building for.

It seems as though you can only customize the root ionic app with the app.vue file. Since the path can't be configured, it breaks the ability to change the app root on a per platform basis. This is because nuxt seems to ignore the layouts folder entirely if there's an app.vue file in the root folder.

🆕 The solution you'd like

If a default layout is found, use that instead of the default app.vue file. Or alternatively, use a layout file called ionic.vue.

Another simple solution would be to allow configuring where nuxt ionic looks for the app.vue file. In this case I could point directly to my app index file:

// Ionic nuxt config...
ionic: {
    appIndex: 'layouts/mobile/default.vue'
}

🔍 Alternatives you've considered

I couldn't find any info on the docs on how to accomplish this: https://ionic.nuxtjs.org/cookbook/customising-app-vue

ℹ️ Additional info

[elinardo10]

I have the same problem, after a lot of headaches I decided to abandon it for now and installed @ionic/vue inside nuxt. I'm taking full power of nuxt and using ionic. I don't know if this will work well on a native Android and iOS app. I'm still going to test it to see what the navigation behavior will be like, among other things. Your solution seems cool, but it's not clear if you have more than one layout. example I use a layout for login auth. another for the app in general... the two don't seem to fit in this configuration

[solmanter]

Is that any way to use multiple layouts with ionic?