Using Appbridge 3. with Vue

[PinalS]

Hi, 

My app uses VueJS for the client side. I'm working on making it compatible with the new admin.shopify.com domain. 

After reading some documentation online, I figured we need to send the host instead of shopOrigin. However, I'm unable to figure out how to fetch the host in Vue. Is there any documentation or example available for the same?

My current code is:

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  beforeCreate () {
    Vue.prototype.$shopID = this.$route.query.shopID
    ShopifyService.getShopDetail(this.$route.query.shopID, 'email').then((result) => {
    var shopOrigin = 'https://' + result.data.domain
      const app = createApp({
        apiKey: [api_key],
        host: window.btoa(shopOrigin + '/admin')
      });
    }).catch((error) => {
      console.log(error)
    })
  }
})

Here, domain is the old .myshopify.com one.

Using the existing code results in a notice as https://www.screencast.com/t/EtrrGq3SC67 on the current tab with app loaded below the notice. A new tab also opens in the current windows with the force_legacy_domain=1

It would be great if someone can point me in the correct direction on how to fix this.

Thanks,

Pinal

[StevenGraf]

I'm having the same issue. I've been getting a cascade of new windows opening. The app will start on the old shopify domain, then redirect to admin.shopify.com, then open a new tab that's at the old shopify domain, over and over again. All new tabs have the query param force_legacy_domain=1. When new tabs open, they invalidate the old ones, and I'm redirected to a page that says there's a cookie error.

I'm using a custom express app that's originally derived from the shopify-app-template-node. Here are my node module dependencies:

For package.json:

"dependencies": {
    "@shopify/app": "3.25.0",
    "@shopify/cli": "3.25.0"
  },

For web/package.json:

"dependencies": {
    "@shopify/shopify-app-express": "^1.0.0",
    "@shopify/shopify-app-session-storage-sqlite": "^1.0.0",
    "@types/express": "^4.17.13",
    "@types/express-serve-static-core": "^4.17.30",
    "compression": "^1.7.4",
    "cookies": "^0.8.0",
    "cross-env": "^7.0.3",
    "mongoose": "^6.8.4",
    "node-fetch": "^3.3.0",
    "serve-static": "^1.14.1"
  },
  "devDependencies": {
    "jsonwebtoken": "^8.5.1",
    "nodemon": "^2.0.15",
    "prettier": "^2.6.2",
    "pretty-quick": "^3.1.3"
  },

For web/frontend/package.json:

"dependencies": {
    "@shopify/app-bridge": "^3.1.0",
    "@shopify/app-bridge-react": "^3.1.0",
    "@shopify/app-bridge-utils": "^3.1.0",
    "@shopify/polaris": "^10.17.1",
    "@shopify/polaris-icons": "^6.7.0",
    "@vitejs/plugin-react": "1.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.19",
    "react-router-dom": "^6.3.0",
    "vite": "^2.8.6"
  },
  "devDependencies": {
    "history": "^5.3.0",
    "jsdom": "^19.0.0",
    "prettier": "^2.6.0",
    "vi-fetch": "^0.6.1"
  }

Is there a version of any of these packages that I need to update to in order for the new redirects to work?

[PinalS]

Hi @StevenGraf,

Were you able to figure a way to fix this? I'm still facing the same issue where cascading windows open with the parameter force_legacy_domain=1 each time I access the app page.

Thanks,

Pinal

[Vanfigs]

We're facing a similar issue. In our case, the embedded app launches twice:

Once in a new tab with this URL:

https://<SHOP_NAME>.myshopify.com/admin/apps/<APP_NAME>?force_legacy_domain=1

Then in the same tab with this URL:
https://admin.shopify.com/store/<SHOP_NAME>/apps/<APP_NAME>

What is missing in our side to avoid launching the new tab? It's not clear from the docs what this behaviour entails.