Merge pull request #19 from Mini-Sylar/bump-1.0.2

Bump 1.0.2

web/frontend/package.json

@@ -10,18 +10,18 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@shopify/app-bridge": "^3.7.9",
-    "pinia": "^2.1.6",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "@shopify/app-bridge": "^3.7.10",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3",
-    "vite": "^4.5.2"
+    "@rushstack/eslint-patch": "^1.7.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.20.1",
+    "prettier": "^3.2.4",
+    "vite": "^5.0.12"
   }
 }

web/frontend/src/components/About/TheWelcomeAbout.vue

@@ -24,6 +24,7 @@
   border-radius: 0.5rem;
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
   text-align: center;
+  margin: 0 auto;
 }
 
 .card {

web/frontend/src/components/Welcome/TheWelcome.vue

@@ -4,17 +4,17 @@
       <div class="left-text">
         <h2>
           Nice work on building a shopify app with a
-          <a href="https://vuejs.org/guide/introduction.html" target="_blank">Vue Template</a>💚
+          <a href="https://shopify-vue-template.vercel.app/" target="_blank">Vue Template</a>💚
         </h2>
         <p>
           Your app is ready to explore, it contains everything you would need to build your awesome
           app!
         </p>
         <h3>Features</h3>
         <ul>
-          <li>Vue 3.3 🟢</li>
-          <li>Vue Router🔗 - For single page navigation</li>
-          <li>Pinia🍍 - For state management</li>
+          <li><a href="https://vuejs.org/guide/introduction.html" target="_blank">Vue {{ version }}</a>🟢 - As your frontend framework</li>
+          <li><a href="https://router.vuejs.org/guide/" target="_blank">Vue Router</a>🔗 - For single page navigation</li>
+          <li><a href="https://pinia.vuejs.org/getting-started.html" target="_blank">Pinia</a>🍍 - For state management</li>
         </ul>
         <hr />
         <ul>
@@ -65,7 +65,7 @@
 <script setup>
 import { Loading, Toast } from '@shopify/app-bridge/actions'
 import { useProductCounterStore } from '@/stores/counter.js'
-import { ref, inject, onMounted, computed } from 'vue'
+import { ref, inject, onMounted, computed,version } from 'vue'
 const appBridge = inject('useAppBridge')
 const buttonDisabled = ref(false)
 
@@ -148,4 +148,8 @@ button:disabled:hover {
   background-color: #ccc;
   cursor: not-allowed;
 }
+
+a{
+  color:#3fad7d;
+}
 </style>

web/frontend/src/helpers/vueAuthenticatedFetch.js → web/frontend/src/helpers/useAuthenticatedFetch.js

@@ -1,19 +1,11 @@
 import { authenticatedFetch } from '@shopify/app-bridge/utilities'
-import { createApp } from '@shopify/app-bridge'
 import { Redirect } from '@shopify/app-bridge/actions'
+import { initAppBridge } from '../plugins/appBridge'
 
-export function useAuthenticatedFetchVue() {
-  const host = new URLSearchParams(location.search).get('host') || window.__SHOPIFY_DEV_HOST
-
-  window.__SHOPIFY_DEV_HOST = host
-  const appBridge = createApp({
-    apiKey: process.env.SHOPIFY_API_KEY,
-    host: host,
-    forceRedirect: true
-  })
+export function useAuthenticatedFetch() {
+  const appBridge = initAppBridge()
   const app = appBridge
   const fetchFunction = authenticatedFetch(app)
-
   return async (uri, options) => {
     const response = await fetchFunction(uri, options)
     checkHeadersForReauthorization(response.headers, app)

web/frontend/src/main.js

@@ -1,5 +1,5 @@
 import './assets/main.css'
-import { shopifyAppBridgePlugin } from './helpers/appBridge.js'
+import { ShopifyAppBridge } from '@/plugins/appBridge.js'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -8,7 +8,7 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
-app.use(shopifyAppBridgePlugin)
+app.use(ShopifyAppBridge)
 app.use(createPinia())
 app.use(router)
 

web/frontend/src/plugins/appBridge.js

@@ -0,0 +1,23 @@
+// @ts-nocheck
+
+import { createApp } from '@shopify/app-bridge'
+export const initAppBridge = () => {
+  const host = new URLSearchParams(location.search).get('host') || window.__SHOPIFY_DEV_HOST
+  window.__SHOPIFY_DEV_HOST = host
+  return createApp({
+    apiKey: process.env.SHOPIFY_API_KEY || '',
+    host: host,
+    forceRedirect: true
+  })
+}
+
+export const ShopifyAppBridge = {
+  /**
+   * @param {import('vue').App} app
+   */
+  install: (app) => {
+    const useAppBridge = initAppBridge()
+    app.config.globalProperties.$useAppBridge = useAppBridge
+    app.provide('useAppBridge', useAppBridge)
+  }
+}

web/frontend/src/stores/counter.js

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import { useAuthenticatedFetchVue } from '../helpers/vueAuthenticatedFetch.js'
+import { useAuthenticatedFetch } from '../helpers/useAuthenticatedFetch'
 
 export const useProductCounterStore = defineStore('productCounter', () => {
   const count = ref(0)
-  const fetch = useAuthenticatedFetchVue()
+  const fetch = useAuthenticatedFetch()
 
   const getProducts = async () => {
     try {