Loading app-bridge.js in Nuxt

App Bridge
1

I’m having issues setting up app-bridge on my Nuxt app. This is my Nuxt config:

app: {

    head: {

      meta: [{ name: 'shopify-api-key', content: process.env.SHOPIFY_API_KEY || '' }],

      script: [

        { src: 'https://cdn.shopify.com/shopifycloud/app-bridge.js', defer: false, async: false },

        { src: 'https://cdn.shopify.com/shopifycloud/polaris.js', defer: false, async: false }

      ]

    }

  },

Whenever I load app-bridge.js, my Nuxt app UI stops loading completely, without any errors.

I attempt to open my browser console and see what the value of window.shopify is, but get undefined

window.shopify
undefined

It feels like loading this script completely blocks execution of everything else, as I get no logs about window.shopify not being found or anything similar (I have useAppBridge composable that should be looking for it). Commenting the app-bridge.js script out makes the whole app load again, but, of course, there is no app-bridge then.

2

So it looks like the window.shopify didn’t work for me because of the shadowroot stuff. My composable is actually getting the value of window.shopify.

I’ve then tried seeing what is wrong with it, and it looks like it loads with apiKey the value being empty.

  nuxtApp.provide('shopify', shopify)
  console.log('shopify value:', shopify.value.config)
  console.log('shopify apikey value:', shopify.value.config.apiKey)

results in

shopify value: {apiKey: ‘’, appOrigins: Array(0), debug: {…}, disabledFeatures: Array(0), experimentalFeatures: Array(0), …}
appBridge.client.ts:30 shopify apikey value:

I do see the host, locale, and shop key values inside the shopify object, tho.

When inspecting <head> tag of the iFrame, I do see both all the tags, but it seems like meta is the last one.

<script nonce="" src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
<script nonce="" src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
<meta name="shopify-api-key" content="[redacted]">

To work around that, I’ve used a server plugin

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html) => {
    // Inject the shopify-api-key meta tag at the beginning of head
    const shopifyApiKey = process.env.SHOPIFY_API_KEY || '';
    html.head.push(`<meta name="shopify-api-key" content="${shopifyApiKey}" />`);
    html.head.push(`<script nonce="" src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>`);
    html.head.push(`<script nonce="" src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>`);
  });
});

This made the app load, however still doesn’t seem like $shopify is functional. I’ll continue working on this tomorrow.