Nuxt Smart App Banner [nuxt ^3.0.0]

Based on
'jQuery Smart Banner' by Arnold Daniels [email protected] https://github.com/jasny/jquery.smartbanner ,
'Smart App Banner' by Vitaly Glibin [email protected] https://github.com/kudago/smart-app-banner

Smart App Banner for Nuxt

• ✨  Release Notes

Features

• Smart App Banner for Anroid/IOS
• Nuxt 3 compatible
• Support native IOS banner
• Callbacks available

Quick Setup

1. Add nuxt-smart-app-banner dependency to your project

# Using pnpm
pnpm add -D nuxt-smart-app-banner

# Using yarn
yarn add --dev nuxt-smart-app-banner

# Using npm
npm install --save-dev nuxt-smart-app-banner

2. Add nuxt-smart-app-banner to the modules section of nuxt.config.ts and provide module config

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
    modules: ['nuxt-smart-app-banner'],
    "nuxt-smart-app-banner": {
      bannerOptions: {
        title: "Title",
        androidAppId: "",
        icon: "https://icon-library.com/images/play-store-icon/play-store-icon-9.jpg",
        iosAppId: "",
        appStoreLanguage: "us",
      }
    }
})

3. Place smart banner component into desired component, page or layout
   ⚠️ Note: if you set overrideComponentNameWith, use custom name instead of SmartAppBanner ⚠️

<template>
  <div>
  🔥<SmartAppBanner/>🔥
    <NuxtWelcome />
  </div>
</template>

4. Using emits(callbacks)

<template>
  <div>
    Nuxt module playground!
  </div>
  <SmartAppBanner 
    @on-dismiss="handleOnDismiss" // callback fired on clicking close button
    @on-install="handleOnInstall" // callback fired on clicking install button
    @on-not-shown="handleOnNotShown" // callback fired on banner not shown because it was previously either clicked or dismissed
    @on-shown="handleOnShown" // callback fired on banner shown
  />
</template>

<script setup>

const handleOnDismiss = (platform, appId) => {
  console.log(`handleOnDismiss ${platform} ${appId}`)
}
const handleOnInstall = (platform, appId) => {
  console.log(`handleOnInstall ${platform} ${appId}`)
}
const handleOnNotShown = (platform, appId, reason) => {
  console.log(`handleOnNotShown ${platform} ${appId} ${reason}`)
}
const handleOnShown = (platform, appId) => {
  console.log(`handleOnShown ${platform} ${appId}`)
}

</script>

That's it! You can now use Nuxt Smart App Banner in your Nuxt app ✨

Config overview

export interface ModuleOptions {
  overrideComponentNameWith?: string; // Use to override default component name
  bannerOptions: {
    useNativeIosBannerForSafari: boolean; // use native ios banner if available instead of custom (default: true)
    daysHidden: number;  // days to banner appear again after close button is clicked (defaults to 15)
    daysReminder: number;  // days to banner appear again after "VIEW" button is clicked (defaults to 90)
    appStoreLanguage: string; // ios app store language
    title: string;  // title text shown on banner
    author: string;  // author text shown on banner
    button: string;  // button text shown on banner
    androidAppId: string;  // android app id
    iosAppId: string; // ios app id
    store: {
        ios: string; // Instore text shown on banner for ios
        android: string; // Instore text shown on banner for android
    },
    price: {
        ios: string; // Price text shown on banner for ios
        android: string; // Price text shown on banner for ios
    },
    icons?: {
        ios: string; // Url for app icon shown on banner for ios
        android: string; // Url for app icon shown on banner for android
    },
    icon: string; // fallback icon url for all platforms
    theme?: SmartAppBannerTheme; // put platform type here to force single theme on all device
    force?: SmartAppBannerPlatform, // put platform type here for force banner platform for debug 
    }
}

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint