refactor: fix eslint warnings in .vue files

packages/theme/components/AddToWishlist.vue

@@ -17,7 +17,7 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, computed } from '@nuxtjs/composition-api';
 import { SfButton } from '@storefront-ui/vue';
 import SvgImage from '~/components/General/SvgImage.vue';

packages/theme/components/Checkout/VsfPaymentProvider.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { SfRadio } from '@storefront-ui/vue';
 import {
   ref,

packages/theme/components/ContentBlock.vue

@@ -13,9 +13,9 @@
     />
   </div>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api';
-import HTMLContent from '~/components/HTMLContent';
+import HTMLContent from '~/components/HTMLContent.vue';
 
 export default defineComponent({
   name: 'ContentBlock',

packages/theme/components/CurrencySelector.vue

@@ -14,15 +14,15 @@
     />
   </div>
 </template>
-<script>
+<script lang="ts">
 import { SfButton } from '@storefront-ui/vue';
 import {
   ref,
   computed,
   defineComponent,
 } from '@nuxtjs/composition-api';
 import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
-import CurrenciesModal from './CurrencySelector/CurrenciesModal';
+import CurrenciesModal from './CurrencySelector/CurrenciesModal.vue';
 
 export default defineComponent({
   name: 'CurrencySelector',

packages/theme/components/General/SvgImage.vue

@@ -5,13 +5,16 @@
     :role="role || (label ? 'img' : null)"
     class="svg-image"
   >
-    <svg :width="width" :height="height">
+    <svg
+      :width="width"
+      :height="height"
+    >
       <use :xlink:href="`#${icon}`" />
     </svg>
   </component>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api';
 
 export default defineComponent({

packages/theme/components/HTMLContent.vue

@@ -4,7 +4,7 @@
     v-html="$dompurify(content)"
   />
 </template>
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api';
 
 export default defineComponent({

packages/theme/components/InstagramFeed.vue

@@ -92,7 +92,7 @@
     </div>
   </SfSection>
 </template>
-<script>
+<script lang="ts">
 import {
   SfSection,
   SfImage,

packages/theme/components/MobileStoreBanner.vue

@@ -39,7 +39,7 @@
     </template>
   </SfBanner>
 </template>
-<script type="module">
+<script lang="ts">
 import {
   SfBanner,
   SfLink,

packages/theme/components/Notification.vue

@@ -14,7 +14,10 @@
       @click:close="notification.dismiss"
       @click:action="notification.action && notification.action.onClick()"
     >
-      <template v-if="notification.icon" #icon>
+      <template
+        v-if="notification.icon"
+        #icon
+      >
         <SvgImage
           :icon="notification.icon"
           width="25"
@@ -25,7 +28,7 @@
   </transition-group>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api';
 import { SfNotification } from '@storefront-ui/vue';
 import { useUiNotification } from '~/composables';

packages/theme/components/StoreSwitcher.vue

@@ -34,7 +34,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import LazyHydrate from 'vue-lazy-hydration';
 
 import { SfButton, SfCharacteristic, SfImage } from '@storefront-ui/vue';

packages/theme/layouts/error.vue

@@ -1,3 +1,5 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- name must be exactly "error.vue" - Nuxt requirement -->
 <template>
   <div class="error-page">
     <h1 v-if="error.statusCode === 404">
@@ -12,15 +14,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api';
 import { SfButton } from '@storefront-ui/vue';
 
 export default defineComponent({
   components: {
     SfButton,
   },
-  layout: 'error',
   props: {
     error: {
       type: Object,

packages/theme/modules/checkout/pages/Checkout/ThankYou.vue

@@ -85,12 +85,14 @@
   </div>
 </template>
 
-<script>
-import { computed, ref, useRoute } from '@nuxtjs/composition-api';
+<script lang="ts">
+import {
+  computed, ref, useRoute, defineComponent,
+} from '@nuxtjs/composition-api';
 import { SfHeading, SfButton, SfCallToAction } from '@storefront-ui/vue';
 import { addBasePath } from '~/helpers/addBasePath';
 
-export default {
+export default defineComponent({
   components: {
     SfHeading,
     SfButton,
@@ -114,7 +116,7 @@ export default {
       orderNumber,
     };
   },
-};
+});
 </script>
 <style lang="scss" scoped>
 #thank-you {

packages/theme/pages/Checkout/ExternalCheckoutThankYou.vue

@@ -89,7 +89,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { SfHeading, SfButton, SfCallToAction } from '@storefront-ui/vue';
 import { defineComponent, ref } from '@nuxtjs/composition-api';
 
@@ -100,7 +100,7 @@ export default defineComponent({
     SfButton,
     SfCallToAction,
   },
-  setup(props, context) {
+  setup(_props, context) {
     context.emit('changeStep', 4);
 
     const companyDetails = ref({

packages/theme/pages/Page.vue

@@ -14,17 +14,16 @@
     </div>
   </SfLoader>
 </template>
-<script>
-import {
-  SfLoader,
-  SfHeading,
-} from '@storefront-ui/vue';
+<script lang="ts">
+import { SfLoader, SfHeading } from '@storefront-ui/vue';
 import {
   defineComponent, ref, useContext, useFetch, useRoute,
 } from '@nuxtjs/composition-api';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
+import type { MetaInfo } from 'vue-meta';
 import { useContent } from '~/composables';
-import HTMLContent from '~/components/HTMLContent';
+import type { CmsPage } from '~/modules/GraphQL/types';
+import HTMLContent from '~/components/HTMLContent.vue';
 
 export default defineComponent({
   name: 'CmsPage',
@@ -41,22 +40,19 @@ export default defineComponent({
   },
   setup(props) {
     const { addTags } = useCache();
-    const {
-      loadPage,
-      error,
-      loading,
-    } = useContent('cmsPage');
+    const { loadPage, error, loading } = useContent();
 
     const route = useRoute();
     const { error: nuxtError, app } = useContext();
     const { params } = route.value;
-    const page = ref({});
+    const page = ref<CmsPage | null>(null);
 
+    // eslint-disable-next-line consistent-return
     useFetch(async () => {
       page.value = await loadPage({ identifier: params.slug || props.identifier });
 
       if (error?.value?.page || !page.value) {
-        return nuxtError({ statusCode: 404, message: app.i18n.t('Page not found') });
+        return nuxtError({ statusCode: 404, message: app.i18n.t('Page not found') as string });
       }
 
       addTags([{ prefix: CacheTagPrefix.View, value: page.value.identifier }]);
@@ -66,7 +62,7 @@ export default defineComponent({
       loading,
     };
   },
-  head() {
+  head() : MetaInfo {
     if (!this.page) {
       return null;
     }

packages/theme/pages/ResetPassword.vue

@@ -89,7 +89,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import {
   SfButton,
   SfLoader,
@@ -101,6 +101,7 @@ import {
   computed,
   defineComponent,
   useContext,
+  useRoute,
 } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { email, required } from 'vee-validate/dist/rules';
@@ -120,7 +121,7 @@ extend('required', {
 
 extend('password', {
   message: invalidPasswordMsg,
-  validate: (value) => customerPasswordRegExp.test(value),
+  validate: (value: string) => customerPasswordRegExp.test(value),
 });
 
 export default defineComponent({
@@ -133,28 +134,36 @@ export default defineComponent({
     ValidationProvider,
     ValidationObserver,
   },
+  // eslint-disable-next-line consistent-return
   middleware({ redirect, route }) {
     if (!route.query.token) {
       return redirect('/');
     }
   },
-  setup(props, context) {
+  setup() {
     const {
       result,
       setNew,
       error: forgotPasswordError,
       loading: forgotPasswordLoading,
     } = useForgotPassword();
-    const passwordMatchError = ref(false);
-    const form = ref({});
+    const passwordMatchError = ref<string | null>(null);
+
+    const form = ref({
+      email: '',
+      password: '',
+      repeatPassword: '',
+    });
     const isPasswordChanged = computed(() => forgotPasswordGetters.isPasswordChanged(result.value));
 
-    const { token } = context.root.$route.query;
+    const route = useRoute();
+    const { token } = route.value.query;
+    // @ts-expect-error Recaptcha is not registered as a Nuxt module. Its absence is handled in the code
     const { $recaptcha, $config } = useContext();
     const isRecaptchaEnabled = ref(typeof $recaptcha !== 'undefined' && $config.isRecaptcha);
 
     const setNewPassword = async () => {
-      passwordMatchError.value = false;
+      passwordMatchError.value = null;
       if (form.value.password !== form.value.repeatPassword) {
         passwordMatchError.value = 'Passwords do not match';
         return;
@@ -168,14 +177,14 @@ export default defineComponent({
         const recaptchaToken = await $recaptcha.getResponse();
 
         await setNew({
-          tokenValue: token,
+          tokenValue: token as string,
           newPassword: form.value.password,
           email: form.value.email,
           recaptchaToken,
         });
       } else {
         await setNew({
-          tokenValue: token,
+          tokenValue: token as string,
           newPassword: form.value.password,
           email: form.value.email,
         });