Originally published at: https://ionic.io/blog/build-and-deploy-mobile-apps-with-nuxt-ionic
The Nuxt Ionic Module lets you combine the power of Nuxt and Ionic to quickly build performant cross-platform apps. Whether you are new to Nuxt or Ionic (or familiar with both), the module provides an out-of-the-box solution to code your app once and deploy to iOS, Android, and web. Nuxt.js is a powerful meta-framework for…
1 Like
Does SSR work with @nuxtjs/ionic, @ceceliaionic?
I installed Ionic module in my Nuxt 3 project following the instructions just the same way. And SSR turned out to be not working anymore after installing @nuxtjs/ionic.
Right now there is not SSR support – you can check out some of the GitHub issues on the repo with details and potential workarounds (such as this one: docs: Motivations behind this package and limitations · Issue #42 · nuxt-modules/ionic · GitHub)
When it comes to building for mobile applications, requiring a remote server for SSR has its pros and cons, so you may want to consider using it strategically in your app. Nuxt Ionic is also still marked as a WIP so I’d recommend following the GitHub repo for updates.
Appreciate your answer!
Thank you so much for this!
Our web development stack is Nuxt 3 with TypeScript, so we’re looking for a mobile solution that doesn’t change the stack too much. I understand that the development would be practically the same as on the web if we can use Nuxt 3 with Ionic and Capacitor, right? Does this add a large layer of overhead or significantly slow down performance using Nuxt instead of directly using Vue or React?
Do you think it would be a good idea to try and reuse the Nuxt components we use in our web projects, on mobile?
The article is very interesting, thank you again!
Great questions, and of course the answer is “it depends” 
There are some options:
-
Use your existing Nuxt app and components, and just wrap the app in Capacitor to build for mobile. For this, you would want to ensure your app looks and feels like a mobile app for user experience on each platform, since you aren’t using Ionic components.
-
A hybrid approach, where you integrate Ionic components in your Nuxt app when building for mobile for components that don’t have a native look and feel already. Then using Capacitor to build for native.
-
Using Nuxt with Ionic and Capacitor and doing a larger overhaul of using all Ionic components for mobile for the highest out-of-the-box native experience.
It will depend on how your existing Nuxt web components will look on mobile, how important a native mobile experience is to your users, and how quickly your team can integrate Ionic components into the exiting web app codebase.
As for performance, it again depends. Nuxt for web provides some great performance features because of Universal/SSR rendering and hydration, however that does get lost on mobile due to the issues I mentioned in the first response. Because of this, you may want to measure things like bundle size, initial load time, etc. when using Nuxt vs Vue for mobile. I haven’t done any measuring but there may be some stats out there, although Nuxt for mobile is still pretty new so you may want to do a POC and test it.
Hello! I just came across this post and wanted to try it out. I attempted to follow the steps and my build failed in appflow with:
[23:01:21]: No dist found in root of project.
Not sure why, I did run npx nuxi generate and the starter app looked good locally, only when trying to create a did a problem come up. Thank you!
I figured it out… the dist folder was listed in gitignore. Leaving this hear just in case someone else runs into a similar issue. Thanks!
For me, removing dist from .gitignore didn’t fix. The problem was that I used nuxt build instead of nuxi generate.