aaronksaunders / nuxt-starter-ionic-sidemenu-auth

Nuxt 3 Ionic Side Menu Minimal Starter

Look at the nuxt 3 documentation and Nuxt Ionic Documentationto learn more.

Whats Covered

• ionic side menu - implemented using split pane
• login screen
• private UI only accessible after auth using nuxt middleware and nuxt composables to manage auth data
• already integrated Ionic Capacitor for deployment to mobile IOS and Android devices
• Deploying To Device
• Addressing CORS Issues When Calling Server APIs From Mobile App
• Using alertController and actionSheetController

How I Made This Work

Building Mobile App

• need to have SSR = false to generate the output that is needed for capacitor to build app
• the mobile build calls ionic:build:env BUILD_MOBILE=true npx nuxt generate
• added environment variable that I set in package.json, env BUILD_MOBILE=true npx nuxt generate if build mobile is true then I do two things in the nuxt.config.ts.
• set the SSR to false
• set the API URL to be where i have hosted the server apis from this application

export default defineNuxtConfig({
  modules: ["@nuxtjs/ionic"],
  ssr : process.env.BUILD_MOBILE === "true" ? false : true, // set the ssr value
  appConfig : {
    API_SERVER_URL :process.env.BUILD_MOBILE === "true" ? process.env.SERVER_URL : "/", // set api url
  },
  ionic: {
    integrations: {
      pwa: false,
    },
    css: {
      basic: true,
      core: true,
      utilities: true,
    },
  }
});

• finally i set the environment variable SERVER_URL to point to where the server api is hosted

Server App

• added environment variable that is not set set in package.json, BUILD_MOBILE if build mobile is not defined then I do two things in the nuxt.config.ts
• set the SSR to true
• set the API URL to be /

Addressing CORS Issue

• when the mobile app is calling the server api since the origins are different we are getting CORS errors. I addressed the issue by creating server middleware to handle it

// server/middleware/cors.ts
// https://github.com/nuxt/nuxt/issues/14598#issuecomment-1397361194
export default defineEventHandler((event) => {
 setResponseHeaders(event, {
   "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
   "Access-Control-Allow-Origin": "*",
   'Access-Control-Allow-Credentials': 'true',
   "Access-Control-Allow-Headers": '*',
   "Access-Control-Expose-Headers": '*'
 })
 if(getMethod(event) === 'OPTIONS'){
   event.res.statusCode = 204
   event.res.statusMessage = "No Content."
   return 'OK'
 }
})