Use i18n from useI18n composable instead of Nuxt context

src/components/VAllResultsGrid/VAllResultsGrid.vue

@@ -41,12 +41,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useMediaStore } from '~/stores/media'
 import { useFocusFilters } from '~/composables/use-focus-filters'
 import { Focus } from '~/utils/focus-management'
 
+import { useI18n } from '~/composables/use-i18n'
+
 import VImageCellSquare from '~/components/VAllResultsGrid/VImageCellSquare.vue'
 import VAudioCell from '~/components/VAllResultsGrid/VAudioCell.vue'
 import VLoadMore from '~/components/VLoadMore.vue'
@@ -63,7 +65,7 @@ export default defineComponent({
     VContentLink,
   },
   setup() {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const mediaStore = useMediaStore()
 
     const resultsLoading = computed(() => {

src/components/VAudioThumbnail/VAudioThumbnail.vue

@@ -31,14 +31,14 @@
 import {
   ref,
   onMounted,
-  useContext,
   defineComponent,
   PropType,
 } from '@nuxtjs/composition-api'
 
 import { rand, hash } from '~/utils/prng'
 import { lerp, dist, bezier, Point } from '~/utils/math'
 import type { AudioDetail } from '~/models/media'
+import { useI18n } from '~/composables/use-i18n'
 
 /**
  * Displays the cover art for the audio in a square aspect ratio.
@@ -56,7 +56,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const helpText = i18n
       .t('audio-thumbnail.alt', {
         title: props.audio.title,

src/components/VAudioTrack/layouts/VBoxLayout.vue

@@ -33,15 +33,11 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { AudioDetail } from '~/models/media'
 import type { AudioSize } from '~/constants/audio'
+import { useI18n } from '~/composables/use-i18n'
 
 import VLicense from '~/components/VLicense/VLicense.vue'
 
@@ -61,7 +57,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const isSmall = computed(() => props.size === 's')
 
     const width = computed(() => {

src/components/VAudioTrack/layouts/VRowLayout.vue

@@ -83,17 +83,11 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useBrowserIsBlink } from '~/composables/use-browser-detection'
-
+import { useI18n } from '~/composables/use-i18n'
 import type { AudioDetail } from '~/models/media'
-
 import type { AudioSize } from '~/constants/audio'
 
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
@@ -120,7 +114,7 @@ export default defineComponent({
   setup(props) {
     /* Utils */
     const browserIsBlink = useBrowserIsBlink()
-    const { i18n } = useContext()
+    const i18n = useI18n()
 
     const featureNotices: {
       timestamps?: string

src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -24,15 +24,11 @@
   </VButton>
 </template>
 <script>
-import {
-  computed,
-  defineComponent,
-  inject,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, inject } from '@nuxtjs/composition-api'
 
 import { ALL_MEDIA } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
+import { useI18n } from '~/composables/use-i18n'
 import { isMinScreen } from '~/composables/use-media-query'
 import { isValidSearchType } from '~/utils/prop-validators'
 
@@ -61,7 +57,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const isHeaderScrolled = inject('isHeaderScrolled', null)
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
 

src/components/VErrorSection/VErrorImage.vue

@@ -12,16 +12,12 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License, LicenseVersion } from '~/constants/license'
 import { ErrorCode, errorCodes } from '~/constants/errors'
 import { AttributableMedia, getAttribution } from '~/utils/attribution-html'
+import { useI18n } from '~/composables/use-i18n'
 
 import imageInfo from '~/assets/error_images/image_info.json'
 
@@ -48,7 +44,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
 
     const images = Object.fromEntries(
       imageInfo.errors.map((errorItem) => {

src/components/VHeader/VFilterButton.vue

@@ -32,12 +32,12 @@ import {
   defineComponent,
   inject,
   toRefs,
-  useContext,
   ref,
 } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
 import { defineEvent } from '~/types/emits'
+import { useI18n } from '~/composables/use-i18n'
 
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -61,7 +61,7 @@ const VFilterButton = defineComponent({
     toggle: defineEvent(),
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const searchStore = useSearchStore()
     const { pressed } = toRefs(props)
     const isMinScreenMd = inject('isMinScreenMd', ref(false))

src/components/VHeader/VHeader.vue

@@ -62,6 +62,7 @@ import { ALL_MEDIA } from '~/constants/media'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useMatchSearchRoutes } from '~/composables/use-match-routes'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+import { useI18n } from '~/composables/use-i18n'
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 import { useMediaStore } from '~/stores/media'
 import { useSearchStore } from '~/stores/search'
@@ -90,7 +91,8 @@ export default defineComponent({
   setup() {
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
-    const { app, i18n } = useContext()
+    const { app } = useContext()
+    const i18n = useI18n()
     const router = useRouter()
 
     const { matches: isSearchRoute } = useMatchSearchRoutes()

src/components/VImageDetails/VImageDetails.vue

@@ -44,7 +44,9 @@
 </template>
 
 <script>
-import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+
+import { useI18n } from '~/composables/use-i18n'
 
 import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
 import VLink from '~/components/VLink.vue'
@@ -69,7 +71,7 @@ const VImageDetails = defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
 
     const imgType = computed(() => {
       if (props.imageType) {

src/components/VLicense/VLicense.vue

@@ -17,16 +17,11 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { ALL_LICENSES, License, LICENSE_ICONS } from '~/constants/license'
-
 import { getFullLicenseName, getElements } from '~/utils/license'
+import { useI18n } from '~/composables/use-i18n'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 
@@ -63,7 +58,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
 
     const iconNames = computed(() => getElements(props.license))
     const licenseName = computed(() => {

src/components/VLoadMore.vue

@@ -11,10 +11,11 @@
   </VButton>
 </template>
 <script lang="ts">
-import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useMediaStore } from '~/stores/media'
 import { useSearchStore } from '~/stores/search'
+import { useI18n } from '~/composables/use-i18n'
 
 import VButton from '~/components/VButton.vue'
 
@@ -24,7 +25,7 @@ export default defineComponent({
     VButton,
   },
   setup() {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 

src/components/VMediaInfo/VCopyLicense.vue

@@ -32,12 +32,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, useContext } from '@nuxtjs/composition-api'
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { AttributionOptions, getAttribution } from '~/utils/attribution-html'
 
 import type { Media } from '~/models/media'
 
+import { useI18n } from '~/composables/use-i18n'
+
 import VTabs from '~/components/VTabs/VTabs.vue'
 import VTab from '~/components/VTabs/VTab.vue'
 import VLicenseTabPanel from '~/components/VMediaInfo/VLicenseTabPanel.vue'
@@ -54,7 +56,7 @@ const VCopyLicense = defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
     const getAttributionMarkup = (options?: AttributionOptions) =>
       getAttribution(props.media, i18n, options)
     return {

src/components/VMediaInfo/VMediaReuse.vue

@@ -18,17 +18,14 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { getFullLicenseName } from '~/utils/license'
 
 import type { Media } from '~/models/media'
 
+import { useI18n } from '~/composables/use-i18n'
+
 import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 import VMediaLicense from '~/components/VMediaInfo/VMediaLicense.vue'
 
@@ -42,7 +39,7 @@ const VMediaReuse = defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
 
     const fullLicenseName = computed(() =>
       getFullLicenseName(props.media.license, props.media.license_version, i18n)

src/components/VSketchFabViewer.vue

@@ -23,7 +23,6 @@ import {
 } from '@nuxtjs/composition-api'
 
 import { useI18n } from '~/composables/use-i18n'
-
 import { loadScript } from '~/utils/load-script'
 
 const sketchfabUrl =

src/composables/use-get-locale-formatted-number.ts

@@ -1,4 +1,4 @@
-import { useContext } from '@nuxtjs/composition-api'
+import { useI18n } from '~/composables/use-i18n'
 
 const WESTERN_ARABIC_NUMERALS = [
   '0',
@@ -19,7 +19,7 @@ const WESTERN_ARABIC_NUMERALS = [
  * the locale preferences for delimiters.
  */
 export const useGetLocaleFormattedNumber = () => {
-  const { i18n } = useContext()
+  const i18n = useI18n()
 
   return (n: number) => {
     const testFormat = n.toLocaleString(i18n.locale)

src/composables/use-i18n-utilities.js

@@ -1,6 +1,5 @@
-import { useContext } from '@nuxtjs/composition-api'
-
 import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
+import { useI18n } from '~/composables/use-i18n'
 
 /**
  * Not using dynamically-generated keys to ensure that
@@ -16,7 +15,7 @@ const i18nKeys = {
  * Returns the localized text for the number of search results.
  */
 export function useI18nResultsCount() {
-  const { i18n } = useContext()
+  const i18n = useI18n()
   const getLocaleFormattedNumber = useGetLocaleFormattedNumber()
 
   /**

src/pages/search/audio.vue

@@ -18,17 +18,13 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  useContext,
-  useMeta,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
 
 import { useLoadMore } from '~/composables/use-load-more'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 import { useFocusFilters } from '~/composables/use-focus-filters'
+import { useI18n } from '~/composables/use-i18n'
 import { Focus } from '~/utils/focus-management'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
@@ -46,7 +42,7 @@ export default defineComponent({
   },
   props: propTypes,
   setup(props) {
-    const { i18n } = useContext()
+    const i18n = useI18n()
 
     useMeta({ title: `${props.searchTerm} | Openverse` })