chore(template): cleanup

Signed-off-by: Frederik Bußmann <frederik@bussmann.io>

Author: freb97

template/app/components/cart/Modal.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 const { open, loading, quantity, lines, total, checkoutUrl } = useCart()
 const route = useRoute()
-const { t } = useI18n()
 
 watch(() => route.path, () => open.value = false)
 </script>
 
 <template>
     <USlideover
         v-model:open="open"
-        :title="t('cart.title')"
-        :description="t('cart.description')"
+        :title="$t('cart.title')"
+        :description="$t('cart.description')"
         :ui="{ description: 'sr-only', body: 'flex flex-col gap-y-6' }"
     >
         <div class="relative">
@@ -50,7 +49,7 @@ watch(() => route.path, () => open.value = false)
                 v-if="lines.length === 0"
                 class="my-auto text-center"
             >
-                {{ t('cart.empty') }}
+                {{ $t('cart.empty') }}
             </p>
         </template>
 
@@ -64,7 +63,7 @@ watch(() => route.path, () => open.value = false)
             >
                 <div class="flex items-center gap-2">
                     <p class="font-medium inline-block">
-                        {{ t('cart.subtotal') }}:
+                        {{ $t('cart.subtotal') }}:
                         <ProductPrice :price="total" />
                     </p>
 
@@ -79,7 +78,7 @@ watch(() => route.path, () => open.value = false)
                     variant="ghost"
                     color="neutral"
                     :to="checkoutUrl"
-                    :label="t('cart.checkout')"
+                    :label="$t('cart.checkout')"
                     size="xl"
                     trailing-icon="i-lucide-arrow-right"
                     :ui="{

template/app/components/filter/type/PriceRange.vue

@@ -10,7 +10,6 @@ const props = defineProps<{
 }>()
 
 const { get, set } = useFilters('price')
-const { t } = useI18n()
 
 const input = computed(() => JSON.parse(props.filter.values.at(0)?.input ?? '{}')?.price as FilterValue)
 
@@ -39,7 +38,7 @@ const submit = async (value: FilterValue) => set(componentToFilter(value))
         <div class="flex flex-row gap-4">
             <UFormField
                 name="min"
-                :label="t('price.from')"
+                :label="$t('price.from')"
             >
                 <UInputNumber
                     v-model="state.min"
@@ -52,7 +51,7 @@ const submit = async (value: FilterValue) => set(componentToFilter(value))
 
             <UFormField
                 name="max"
-                :label="t('price.to')"
+                :label="$t('price.to')"
             >
                 <UInputNumber
                     v-model="state.max"

template/app/components/search/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { language, country } = useLocalization()
 const localePath = useLocalePath()
-const { t, locale } = useI18n()
+const { locale } = useI18n()
 
 const query = ref('')
 const open = ref(false)
@@ -62,15 +62,15 @@ const { data, status } = await useStorefrontData(`search-${query.value ?? 'none'
 const groups = computed(() => [
     {
         id: 'queries',
-        label: t('search.queries'),
+        label: $t('search.queries'),
         items: data.value?.predictiveSearch?.queries.map(predictedQuery => ({
             label: predictedQuery.text,
             onSelect: () => query.value = predictedQuery.text,
         })),
     },
     {
         id: 'products',
-        label: t('search.products'),
+        label: $t('search.products'),
         items: flattenConnection(data.value?.products).map(product => ({
             label: product.title,
             suffix: product.description,
@@ -84,7 +84,7 @@ const groups = computed(() => [
     },
     {
         id: 'collections',
-        label: t('search.collections'),
+        label: $t('search.collections'),
         items: flattenConnection(data.value?.collections).map(collection => ({
             label: collection.title,
             suffix: collection.description,
@@ -94,7 +94,7 @@ const groups = computed(() => [
     },
     {
         id: 'articles',
-        label: t('search.articles'),
+        label: $t('search.articles'),
         items: flattenConnection(data.value?.articles).map(article => ({
             label: article.title,
             suffix: article.excerpt ?? undefined,
@@ -110,20 +110,20 @@ const updateQuery = debounce((value: string) => query.value = value, 300)
 <template>
     <UModal
         v-model:open="open"
-        :title="t('search.label')"
-        :description="t('search.description')"
+        :title="$t('search.label')"
+        :description="$t('search.description')"
     >
         <UButton
             icon="i-lucide-search"
             variant="ghost"
             color="neutral"
-            :label="t('search.label')"
+            :label="$t('search.label')"
         />
 
         <template #content>
             <UCommandPalette
                 :loading="status === 'pending'"
-                :placeholder="t('search.placeholder')"
+                :placeholder="$t('search.placeholder')"
                 :groups="groups"
                 :close="true"
                 @update:search-term="updateQuery"

template/app/composables/product.ts

@@ -42,11 +42,3 @@ export const filtersToQuery = (filters: ProductFilter[]) => {
 
     return query
 }
-
-export const queryToVariantId = (query: LocationQuery) => typeof query.variantId === 'string'
-    ? `gid://shopify/ProductVariant/${query.variantId}`
-    : undefined
-
-export const variantIdToQuery = (variantId?: string): LocationQuery => variantId
-    ? { variantId: variantId.replace('gid://shopify/ProductVariant/', '') }
-    : {}

template/app/utils/query.ts

@@ -18,7 +18,6 @@ export default defineNuxtConfig({
     vite: {
         server: {
             allowedHosts: [
-                '.ngrok-free.app',
                 '.vercel.app',
             ],
         },