Capacitor, Nuxt, and VueJS - Push Notifications

Question

I am new to app building and I started using nuxt and capacitor to develop both an ios and android app. I was having trouble integrating push notifications with my app. I am using the @capacitor/push-notifications package. Is there any direction on how to integrate push notifications with nuxt and capacitor using this package. It would help if someone could walk through this step by step.

This is my nuxt.config.json file

import colors from 'vuetify/es5/util/colors'

export default {
  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
  ssr: false,

  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - title',
    title: 'title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '@/plugins/parse',
    '@/plugins/axios',
    { src: '~plugins/leaflet.js', src: '~plugins/vuesocial.js', ssr: false },
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/moment',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/toast',
    //nuxt-leaflet
    'nuxt-leaflet',
    ['nuxt-stripe-module', {publishableKey:'...',}],
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  toast: {
    position: 'bottom-left',
    duration: 3000,
  },

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: ['parse', 'axios'],
  },
}

This is my capacitor.config.json

{
    "appId":"com.undefined.mobile",
    "appName":"undefined",
    "bundledWebRuntime":false,
    "npmClient": "yarn",
    "webDir":"dist",
    "plugins": {
        "SplashScreen": {
          "launchShowDuration": 0
        }
    },
      "cordova": {},
      "server": {
        "iosScheme": "nuxtmobile"
    }
}

This is my Podfile

platform :ios, '13.0'
use_frameworks!

# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
  pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
end

target 'App' do
  capacitor_pods
  # Add your Pods here
end

Answer 1

You need to setup the push notifications on ios folder ios/App/App/AppDelegate.swift more info at: https://capacitorjs.com/docs/v5/apis/push-notifications