Create Mobile Apps with Nuxt and Capacitor

You can build your Nuxt app just the way you do, enjoy the DX, and then use Capacitor to build native apps for iOS and Android with the same codebase. All you need to do is update your config after you install Capacitor.

Setting up Capacitor

In your Nuxt project, install Capacitor.

npm install @capacitor/cli

Then initialize Capacitor with appName and appId as well as the --web-dir option pointing to the output directory of the Nuxt app. As of Nuxt 3, that would be .output/public. More details on the command can be found in the Capacitor docs.

npx cap init MyApp com.example.myapp --web-dir .output/public

Capacitor all set!

Updating Nuxt config

For Capacitor build to work, assets need to be prerendered. By default, Nuxt either generates a Nitro server for SSR or static site with all routes prerendered. What you might need is something akin to a SPA for a mobile app.

So, we are going to force Nuxt to prepare a SPA with an index.html file that acts as the entry point. You don't need to do anything manually - just ensure SSR is disabled for all routes in the nuxt.config.ts file in your project root.

export default defineNuxtConfig({
  // ...rest of the config
  routeRules: {
    "/**": {
      ssr: false,
    },
  },
});

Now if you run npm run generate, you should see the .output/public folder with an index.html file.

Building the app

Now you can build the app for iOS and Android with Capacitor with its run command.

npx cap run ios
npx cap run android

You need to ensure that you have generated the Nuxt assets before you build the app. You can do that by running npm run generate.

What if I want both SSR and mobile apps?

You can remove the routeRules we created above and build as you normally do. You can switch back to the above config when you want to build for mobile. Or better yet, since the config file is just a JavaScript file, you can use environment variables to switch between the configs.

The world is your oyster ;)

Need someone to build a mobile app with Nuxt and Capacitor? Get in touch!