Using NuxtJS to Build an iOS and Android App

Yup, you can build a mobile app using NuxtJS! If you structure your NuxtJS install correctly, you can easily package it up and deploy it to the iOS and Android app stores. Let’s run through how to set up NuxtJS and get it ready for a mobile app.

Step 1: Start With A Fresh NuxtJS Install

The first step will be to install NuxtJS. There are a few ways to install NuxtJS, but the most convenient is to use either:

yarn create nuxt-app <project-name>

or

npx create-nuxt-app <project-name>

Both of those commands will run through a guided install process where you can name your project, select additional packages, etc. There are a lot of options and additional packages you can select, but here are a few of the most important.

Select TailwindCSS

We are going to be using TailwindCSS for this project, so we might as well have the NuxtJS installer set it up for us!

(Optional) Install Axios

I personally would install the Axios module with NuxtJS. I assume you will want to get data from somewhere and Axios makes this easy. You don’t have to select Axios, but I highly recommend it. If you need a little help understanding some of the tricks and gotchas, I wrote a small course.

Select SPA!

We are building a mobile app not a web app (if you want to know how to run both from the same code base, check out our book). We want to keep the package size small and the best way to do that is to run your app as an SPA.

What Hosting Should I Select?

I’d select static. Reason being, the mobile app will run in a static format within the app package with CapacitorJS.

NuxtJS will now run through the install script and create you a beautiful app!

Step 2: Update the Public Path

To create an Android application we have to set the publicPath variable in our build config. This way we have a root directory that we can use when we export to CapcitorJS. This doesn’t affect iOS, but is required for Android. It’s a simple fix, so first open up your nuxt.config.js file and find the build settings:

build: {
    publicPath: '/nuxt/',
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
},

That’s all we have to do for now! We will come back to this file a little later when we add some default settings to make the app feel more mobile friendly.

If you want to learn how to configure your NuxtJS install to work with both Web and Mobile, we have a book that goes through the entire process! Along with that, we even show you how to build your own API.

Let me know if questions come up either in the comment section below or reach out on Twitter (@danpastori).