Refactor variable names for clarity and consistency

README.md

@@ -17,17 +17,17 @@ Nothing modified on the backend, uses the same starter template from the one gen
 
 ### Vue 💚
 
-- [Vue.js 3.3](https://vuejs.org/)
+- [Vue.js 3.4](https://vuejs.org/)
 - [Vue Router 4](https://router.vuejs.org/) for single page app routing
 - [Pinia](https://pinia.esm.dev/) for state management
-- [EsLint](https://eslint.org/) for linting
+- [EsLint](https://eslint.org/) for static code analysis
 
 <br>
 
 ### Shopify 🛍
 
 - `AppBridge` Plugin for Vue to use [Shopify App Bridge](https://shopify.dev/tools/app-bridge) actions and components
-- `vueAuthenticatedFetch` to make authenticated requests to the Shopify API and your backend.
+- `useAuthenticatedFetch` to make authenticated requests to the Shopify API and your backend.
 - App embedding
 
 <br>

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

@@ -12,13 +12,22 @@
         </p>
         <h3>Features</h3>
         <ul>
-          <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>
+          <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>
-          <li>vueAuthenticatedFetch 🚀 - for making authenticated requests to your backend</li>
+          <li>useAuthenticatedFetch 🚀 - for making authenticated requests to your backend</li>
           <li>
             AppBridge integration🚉 - Allows you to use various app bridge actions, see
             <a href="#">AppBridge</a>
@@ -65,7 +74,7 @@
 <script setup>
 import { Loading, Toast } from '@shopify/app-bridge/actions'
 import { useProductCounterStore } from '@/stores/counter.js'
-import { ref, inject, onMounted, computed,version } from 'vue'
+import { ref, inject, onMounted, computed, version } from 'vue'
 const appBridge = inject('useAppBridge')
 const buttonDisabled = ref(false)
 
@@ -149,7 +158,7 @@ button:disabled:hover {
   cursor: not-allowed;
 }
 
-a{
-  color:#3fad7d;
+a {
+  color: #3fad7d;
 }
 </style>