@easy-smart-app-banner/vue-plugin

Easy Smart App Banner - Vue Plugin

A Vue Plugin for Smart App Banner.

Install

npm i -S @easy-smart-app-banner/vue-plugin

vue (^3.5.0) is a peer dependency. Your app provides it.

Usage

// main.ts
import './assets/main.css';

import { createApp } from 'vue';
import App from './App.vue';
import createSmartAppBanner, {
    type SmartBannerOptions,
} from '@easy-smart-app-banner/vue-plugin';
import '@easy-smart-app-banner/vue-plugin/style.css';
// or SCSS if you prefer
// import '@easy-smart-app-banner/vue-plugin/style.scss';

createApp(App)
    .use(createSmartAppBanner, {
        title: 'Hello world!',
        author: 'Albert Ferguson',
        // using the create-vue asset logo (any image is valid!)
        icon: '/src/assets/logo.svg',
        // optionally enable verbose logging - this is disabled by default
        verbose: true,
        googlePlayStoreUrl: 'https://play-store-application-url',
        appStoreUrl: 'https://app-store-application-url',
    } as SmartBannerOptions)
    .mount('#app');

// App.vue
<script setup lang="ts">
import { useSmartAppBanner } from '@easy-smart-app-banner/vue-plugin';

const smartAppBanner = useSmartAppBanner();

try {
    // mount the component
    smartAppBanner.mount();
} catch (error) {
    // catch any errors gracefully if there's any config or platform issues
    console.error(error);
}
</script>

For more on configuration, see the Smart App Banner repository.

Development

To get started, pull the repo and run a build.

don't forget to run npm i!

npm run build

You can checkout the rest of the commands in the package.json.

The next step would be to boot up the dependent project, as you're probably looking to edit it too. See here.

Publish a Release

The plugin is released together with core, by the Publish Packages to npmjs GitHub Action. See Publish a Release in the repository README. Validate the install and version by bumping the vue-demo project afterwards.

Done! 🎈

Licence

MIT License © 2025-PRESENT Albert Ferguson