Using NuxtJS to Build an iOS and Android App

Part 1 of 4 in Build an iOS & Android App with CapacitorJS + NuxtJS + TailwindCSS
Dan Pastori avatar
Dan Pastori August 16th, 2020

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).

Keep Reading
View the course View the Course Build an iOS & Android App with CapacitorJS + NuxtJS + TailwindCSS
Up Next → Packaging a NuxtJS app for iOS and Android with CapacitorJS

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.