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'
    }
    })