App Manager Vue SDK

Note about translations

This package does not manage, store, or ship translations itself — it only uses the translation data you provide when rendering components (for example via the translations prop). Always pass the correct translations for the language/context you need. The package will not automatically translate or fetch missing keys for you.

Here is the list of all translation keys used in this package — when upgrading the package, make sure any new or missing keys are added to your translations and passed into the components via the translations prop.

Installation

You can install the package via npm:

npm i @hulkapps/app-manager-vue

Register

import Vue from 'vue';
import AppManager from '@hulkapps/app-manager-vue';

Vue.use(AppManager);

Usage

<Banners type="header" @handleBannerClose="handleBannerClose" :translations="translations"/>
<Banners type="footer" @handleBannerClose="handleBannerClose" :translations="translations"/>
<AppManagerPlan @handlePlanSelect="handlePlanSelectListener" @handlePlanBannerClose="handleBannerClose" :shop_domain="shop_domain" :translations="translations"/>
<AppManagerSliderPlan @handlePlanSelect="handlePlanSelectListener" @handlePlanBannerClose="handleBannerClose" :shop_domain="shop_domain" :translations="translations"/>

AppManagerPlan Props

Here is a basic explanation of all the props for the <AppManagerPlan> component:

| Prop Name | Type | Default | Description | |--------------- |---------|-----------|-----------------------------------------------------------------------------| | shop_domain | String | — | The domain of the Shopify store. Required to fetch and display plans. | | base_url | String | null | The base URL for API requests. Used to configure backend communication. | | host | String | null | Shopify host parameter, used for embedded app context. | | discount_code | String | null | Discount code to apply to plans, if available. | | is_customizable| Boolean | false | Allows the user to customize their plan if set to true. | | width | String | 'base' | Controls the layout width of the component. Accepted values: 'tight' (max-width: 840px), 'base' (max-width: 1190px, default), 'loose' (max-width: 1600px). | | translations | Object | { hulkapps: 'hulkapps' } | Object for customizing translation strings. | | enable_feature_tooltip | Boolean | false | If true, shows the feature description as a tooltip for plan features (tap to show/hide on mobile). Tooltip is only shown if the feature has a description. |

You can use these props to control the appearance, context, and behavior of the <AppManagerPlan> component to fit your app's needs.

Non-Vue App usage

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hulkapps/[email protected]/dist/app-manager-vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@hulkapps/[email protected]/dist/hulkapps-app-manager.css" rel="stylesheet">

<div id="app" class="app-manager">
    <Banners type="header"  @handleBannerClose="handleBannerClose"/>
    <app-manager-plan  @handle-plan-select="handlePlanSelectListener" @handlePlanBannerClose="handleBannerClose" :translations="translations" shop_domain="<%= @store.shopify_domain %>" />
</div>

<script>
    Vue.use(AppManagerVue, {baseUrl: '<%= ENV['volume_domain'] %>'})
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            domain: '<%= @store.shopify_domain %>'
        }
    })
</script>

A handlePlanSelect event is emitted when the user continues without selecting a plan.

handlePlanSelectListener(payload) {

  if (payload.choose_later && payload.choose_later === true) {
    //handle choose_later
  }
    
 if (payload.free_plan && payload.free_plan === true) {
         //handle free_plan selection
       }
}

A handleBannerClose event is emitted when the user closed banner.

handleBannerClose(payload) {

    //handle close event
}

Translation Keys

This package does not manage, store, or generate translations. It strictly renders the translation data supplied to it. Components expect a complete translation object to be provided via the translations prop. The package does not perform automatic localization or resolve missing translation keys.

The complete list of predefined translation keys referenced by this package is available here. The list includes only the static keys used internally by the components and does not cover dynamic or app-specific content such as plan names, feature labels, trial durations, pricing text, or plan descriptions. Those values should also be provided through the same translations prop, alongside the predefined keys, to ensure correct rendering.

License

The MIT License (MIT). Please see License File for more information.