App Manager Vue SDK

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
}

Extracting Translation Keys

You can extract all translation keys used in this package by running:

cd node_modules/@hulkapps/app-manager-vue

node extract-translation-keys.js

If your package is located elsewhere, replace the path with the actual location, for example:

cd path-to-package

node extract-translation-keys.js

This will scan all .js and .vue files within the src directory of this package for usages of translateMe('...') and output a JSON array of unique translation keys to the console.

License

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