diff --git a/components/bsx/format/TokenMoney.vue b/components/bsx/format/TokenMoney.vue
index e31ee1aa6f..af60ae223f 100644
--- a/components/bsx/format/TokenMoney.vue
+++ b/components/bsx/format/TokenMoney.vue
@@ -8,34 +8,28 @@
     :round="round" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import BasicMoney from '@/components/shared/format/BasicMoney.vue'
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import AssetMixin from '@/utils/mixins/assetMixin'
+import { useAssetsStore } from '@/stores/assets'
 
-@Component({
-  components: {
-    BasicMoney,
-  },
-})
-export default class TokenMoney extends mixins(AssetMixin) {
-  @Prop({ default: '0' }) readonly value: number | string | undefined
-  @Prop({ type: String, default: '5' }) tokenId!: string | number
-
-  @Prop(Boolean) readonly inline!: boolean
-  @Prop(Boolean) readonly hideUnit!: boolean
-  @Prop({ type: Number, default: 4 }) readonly round!: number
-
-  get asset() {
-    return this.assetIdOf(this.tokenId)
+const assetsStore = useAssetsStore()
+const assetIdOf = (id: string | number) => assetsStore.getAssetById(String(id))
+const props = withDefaults(
+  defineProps<{
+    value: number | string | undefined
+    tokenId: string
+    inline: boolean
+    hideUnit?: boolean
+    round: number
+  }>(),
+  {
+    value: '0',
+    tokenId: '5',
+    round: 4,
   }
+)
 
-  get unit() {
-    return this.asset.symbol
-  }
-
-  get decimals() {
-    return this.asset.decimals
-  }
-}
+const asset = computed(() => assetIdOf(props.tokenId))
+const unit = computed(() => asset.symbol)
+const decimals = computed(() => asset.decimals)
 </script>
diff --git a/components/rmrk/Gallery/Item/Name.vue b/components/rmrk/Gallery/Item/Name.vue
deleted file mode 100644
index 21d5135f10..0000000000
--- a/components/rmrk/Gallery/Item/Name.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div v-if="detailVisible">
-    <h1 class="title" :class="[detailVisible ? 'is-size-1' : 'is-size-3']">
-      <span v-if="!isLoading">
-        <span v-if="nft.burned">「🔥」</span>
-        <span :class="{ 'has-text-info': nft.isFrozen }">{{ nft.name }}</span>
-        <span v-if="carbonlessBadge">「🌱」</span>
-      </span>
-      <NeoSkeleton size="large" :active="isLoading"></NeoSkeleton>
-    </h1>
-    <p v-if="nft.isFrozen" class="title is-size-4 has-text-info">
-      {{ $t('nft.frozen') }} 「❄️」
-      <NeoSkeleton :count="1" size="large" :active="isLoading"></NeoSkeleton>
-    </p>
-    <p v-if="nft.burned" class="title is-size-4 has-text-danger">
-      {{ $t('nft.burned') }} 「🔥」
-      <NeoSkeleton :count="1" size="large" :active="isLoading"></NeoSkeleton>
-    </p>
-    <p v-if="carbonlessBadge" class="title is-size-4 has-text-success">
-      {{ $t('nft.carbonless') }} 「🌱」
-      <NeoSkeleton :count="1" size="large" :active="isLoading"></NeoSkeleton>
-    </p>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import isShareMode from '@/utils/isShareMode'
-import { NFTWithMeta } from '../../service/scheme'
-import { emptyObject } from '@/utils/empty'
-import { NeoSkeleton } from '@kodadot1/brick'
-
-@Component({
-  NeoSkeleton,
-})
-export default class Name extends Vue {
-  @Prop({ default: () => emptyObject<NFTWithMeta>() }) public nft!: NFTWithMeta
-  @Prop() public isLoading!: boolean
-
-  get detailVisible() {
-    return !isShareMode
-  }
-
-  get carbonlessBadge() {
-    return this.nft.attributes?.some(
-      ({ trait_type, value }) => trait_type === 'carbonless' && value
-    )
-  }
-}
-</script>
diff --git a/components/rmrk/Gallery/Item/Price.vue b/components/rmrk/Gallery/Item/Price.vue
deleted file mode 100644
index 309b17da29..0000000000
--- a/components/rmrk/Gallery/Item/Price.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <TitleLabel value="price" />
-    <div>
-      <div>
-        <Money :value="nft.price" inline />
-      </div>
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-
-const components = {
-  TitleLabel: () => import('@/components/shared/gallery/Label.vue'),
-}
-
-@Component({ components })
-export default class Price extends Vue {
-  @Prop(String) public value!: string
-}
-</script>
diff --git a/components/search/SearchResultItem.vue b/components/search/SearchResultItem.vue
index 49659d0547..5829d8770d 100644
--- a/components/search/SearchResultItem.vue
+++ b/components/search/SearchResultItem.vue
@@ -2,7 +2,7 @@
   <div class="search-result-item" :class="{ 'loading-item': isLoading }">
     <div class="media">
       <div class="media-left" :class="{ border: !isLoading }">
-        <NeoSkeleton v-if="isLoading" width="64px" height="64px"></NeoSkeleton>
+        <NeoSkeleton v-if="isLoading" width="64px" height="64px" />
         <BasicImage v-else custom-class="is-64x64" :src="image" />
       </div>
       <div
@@ -13,13 +13,13 @@
           :width="240"
           :height="22"
           size="medium"
-          active></NeoSkeleton>
+          active />
         <NeoSkeleton
           :count="1"
           :width="150"
           :height="22"
           size="medium"
-          active></NeoSkeleton>
+          active />
       </div>
       <div v-else class="media-content">
         <slot name="content"></slot>
@@ -28,21 +28,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import { NeoSkeleton } from '@kodadot1/brick'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
 
-@Component({
-  components: {
-    BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
-    NeoSkeleton,
-  },
-})
-export default class SearchResultItem extends Vue {
-  @Prop({ type: Boolean, default: false }) public isLoading!: boolean
-  @Prop({ type: String, default: '' }) public image!: string
-}
+withDefaults(
+  defineProps<{
+    isLoading?: boolean
+    image?: string
+  }>(),
+  {
+    isLoading: false,
+    image: '',
+  }
+)
 </script>
+
 <style scoped>
 .media-left :deep img {
   max-height: 100%;
diff --git a/components/shared/Auth.vue b/components/shared/Auth.vue
index 43e12567fd..7e58a3590a 100644
--- a/components/shared/Auth.vue
+++ b/components/shared/Auth.vue
@@ -10,40 +10,33 @@
   <ConnectWalletButton v-else label="general.connect_wallet" />
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
+import Avatar from '@/components/shared/Avatar.vue'
+import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
+import Identity from '@/components/identity/IdentityIndex.vue'
 import { useIdentityStore } from '@/stores/identity'
 
-const components = {
-  Avatar: () => import('@/components/shared/Avatar.vue'),
-  ConnectWalletButton: () =>
-    import('@/components/shared/ConnectWalletButton.vue'),
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  Money: () => import('@/components/shared/format/Money.vue'),
-}
-
-@Component({ components })
-export default class Auth extends Vue {
-  @Prop({ default: 24 }) public size!: number
-
-  public mounted() {
-    if (this.account) {
-      this.$emit('input', this.account)
-    }
-  }
-
-  get identityStore() {
-    return useIdentityStore()
-  }
-
-  set account(account: string) {
-    this.identityStore.setAuth({ address: account })
+const emit = defineEmits(['input'])
+const identityStore = useIdentityStore()
+const account = computed({
+  get: () => identityStore.getAuthAddress,
+  set: (account: string) => identityStore.setAuth({ address: account }),
+})
+
+withDefaults(
+  defineProps<{
+    size: number
+  }>(),
+  {
+    size: 24,
   }
+)
 
-  get account() {
-    return this.identityStore.getAuthAddress
+onMounted(() => {
+  if (account.value) {
+    emit('input', account.value)
   }
-}
+})
 </script>
 
 <style scoped>
diff --git a/components/shared/BlockExplorerLink.vue b/components/shared/BlockExplorerLink.vue
index a5da539b59..a159cc4d80 100644
--- a/components/shared/BlockExplorerLink.vue
+++ b/components/shared/BlockExplorerLink.vue
@@ -5,40 +5,35 @@
   </a>
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import {
   BLOCK_EXPLORER_WITH_QUERY,
   blockExplorerOf,
 } from '@/utils/config/chain.config'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
 
-const components = {}
+const { urlPrefix } = usePrefix()
 
-@Component({ components })
-export default class BlockExplorerLink extends mixins(PrefixMixin) {
-  @Prop({ type: String, default: 'subscan' }) public provider!: string
-  @Prop({ type: String, required: true }) public blockId!: string
-  @Prop({ type: String, required: true }) public text!: string
-
-  get blockUrl(): string {
-    if (!this.hasBlockUrl || !this.blockId) {
-      return '#'
-    }
-    if (BLOCK_EXPLORER_WITH_QUERY.includes(this.urlPrefix)) {
-      return this.blockExplorer + this.blockId
-    }
-    return this.blockExplorer + 'block/' + this.blockId
+const props = withDefaults(
+  defineProps<{
+    provider: string
+    blockId: string
+    text: string
+  }>(),
+  {
+    provider: 'subscan',
   }
+)
 
-  get blockExplorer(): string | undefined {
-    return blockExplorerOf(this.urlPrefix)
-  }
+const blockExplorer = computed(() => blockExplorerOf(urlPrefix.value))
+const hasBlockUrl = computed(() => Boolean(blockExplorer.value))
 
-  get hasBlockUrl(): boolean {
-    return Boolean(this.blockExplorer)
+const blockUrl = computed(() => {
+  if (!hasBlockUrl.value || !props.blockId) {
+    return '#'
   }
-}
+  if (BLOCK_EXPLORER_WITH_QUERY.includes(urlPrefix.value)) {
+    return blockExplorer.value + props.blockId
+  }
+  return blockExplorer.value + 'block/' + props.blockId
+})
 </script>
-
-<style scoped></style>
diff --git a/components/shared/CommonTokenMoney.vue b/components/shared/CommonTokenMoney.vue
index bc4be88733..295f2ebc1a 100644
--- a/components/shared/CommonTokenMoney.vue
+++ b/components/shared/CommonTokenMoney.vue
@@ -10,24 +10,26 @@
   <Money v-else :value="value" :data-cy="dataCy" inline :round="round" />
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
+<script lang="ts" setup>
+import Money from '@/components/shared/format/Money.vue'
+import TokenMoney from '@/components/bsx/format/TokenMoney.vue'
+import { getKusamaAssetId } from '@/utils/api/bsx/query'
 
-const components = {
-  Money: () => import('@/components/shared/format/Money.vue'),
-  TokenMoney: () => import('@/components/bsx/format/TokenMoney.vue'),
-}
-
-@Component({ components })
-export default class CommonTokenMoney extends mixins(PrefixMixin) {
-  @Prop({ default: '0' }) readonly value!: number | string | undefined
-  @Prop({ default: '' }) readonly customTokenId!: string | undefined
-  @Prop({ type: String, default: '' }) readonly dataCy!: string
-  @Prop({ type: Number, default: 4 }) readonly round!: number
-
-  get currentTokenId() {
-    return this.customTokenId || this.tokenId
+withDefaults(
+  defineProps<{
+    value: number | string | undefined
+    customTokenId?: string | undefined
+    dataCy: string
+    round: number
+  }>(),
+  {
+    value: '0',
+    customTokenId: '',
+    dataCy: '',
+    round: 4,
   }
-}
+)
+
+const { urlPrefix } = usePrefix()
+const tokenId = computed(() => getKusamaAssetId(urlPrefix.value))
 </script>
diff --git a/components/shared/Support.vue b/components/shared/Support.vue
index c2d49abaee..c8b409a830 100644
--- a/components/shared/Support.vue
+++ b/components/shared/Support.vue
@@ -9,31 +9,31 @@
   </NeoSwitch>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import { round } from '@/utils/support'
 import { NeoSwitch } from '@kodadot1/brick'
 
-@Component({ components: { NeoSwitch } })
-export default class Support extends Vue {
-  @Prop() public value!: boolean
-  @Prop({ type: Boolean, default: true }) public showPrice?: boolean
-  @Prop({ default: 0 }) public price!: number
-  @Prop({ default: 'I am helping to cover costs' })
-  public activeMessage!: string
-  @Prop({ default: 'I do not want to support' }) public passiveMessage!: string
-  @Prop({ default: '' }) public type!: string
-
-  get priceString() {
-    return this.showPrice ? ` ($ ${round(this.price)})` : ''
-  }
-
-  get model() {
-    return this.value
-  }
-
-  set model(value: boolean) {
-    this.$emit('input', value)
+const props = withDefaults(
+  defineProps<{
+    value: boolean
+    showPrice?: boolean
+    price?: number
+    activeMessage: string
+    passiveMessage: string
+    type: string
+  }>(),
+  {
+    showPrice: true,
+    price: 0,
+    activeMessage: 'I am helping to cover costs',
+    passiveMessage: 'I do not want to support',
+    type: '',
   }
-}
+)
+const emit = defineEmits(['input'])
+const priceString = ref(props.showPrice ? ` ($ ${round(props.price)})` : '')
+const model = computed({
+  get: () => props.value,
+  set: (value: boolean) => emit('input', value),
+})
 </script>
diff --git a/components/shared/gallery/Properties.vue b/components/shared/gallery/Properties.vue
index f1cc3d5400..bbfed12c4f 100644
--- a/components/shared/gallery/Properties.vue
+++ b/components/shared/gallery/Properties.vue
@@ -17,26 +17,25 @@
   </CollapseCardWrapper>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { Attribute } from '@kodadot1/minimark/common'
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
 import { emptyArray } from '~/utils/empty'
+import CollapseCardWrapper from '@/components/shared/collapse/CollapseCardWrapper.vue'
 
-const components = {
-  CollapseCardWrapper: () =>
-    import('@/components/shared/collapse/CollapseCardWrapper.vue'),
-}
-
-@Component({ components })
-export default class Properties extends Vue {
-  @Prop({ type: Array, default: () => emptyArray<Attribute>() })
-  public attributes!: Attribute[]
-  @Prop({ type: String, default: 'trait_type' }) public fieldKey!: string
-}
+withDefaults(
+  defineProps<{
+    attributes: Attribute[]
+    fieldKey: string
+  }>(),
+  {
+    attributes: () => emptyArray<Attribute>(),
+    fieldKey: 'trait_type',
+  }
+)
 </script>
+
 <style>
 .properties-attribute-key {
   min-height: 18px;
 }
 </style>
->
diff --git a/components/shared/modals/ShowQRModal.vue b/components/shared/modals/ShowQRModal.vue
index cb709114af..e09a75b31a 100644
--- a/components/shared/modals/ShowQRModal.vue
+++ b/components/shared/modals/ShowQRModal.vue
@@ -6,26 +6,20 @@
   </ModalWrapper>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
+import ModalWrapper from './ModalWrapper.vue'
+import QRCode from '@/components/shared/QRCode.vue'
 
-const components = {
-  ModalWrapper: () => import('./ModalWrapper.vue'),
-  QRCode: () => import('@/components/shared/QRCode.vue'),
-}
-
-@Component({
-  name: 'ShowQRModal',
-  components,
-})
-export default class ShowQRModal extends Vue {
-  @Prop({ type: String, required: true }) public address!: string
-  @Prop({ type: String }) public title!: string
-  @Prop({ type: String, default: 'is-bordered-light' })
-  public type?: string
-
-  get qrCodePath(): string {
-    return this.address || 'https://http.cat/409'
+const props = withDefaults(
+  defineProps<{
+    address: string
+    title: string
+    type: string
+  }>(),
+  {
+    type: 'is-bordered-light',
   }
-}
+)
+
+const qrCodePath = ref(props.address || 'https://http.cat/409')
 </script>
diff --git a/components/shared/view/BasicPopup.vue b/components/shared/view/BasicPopup.vue
index 689b4eefcb..84bc4fb0ee 100644
--- a/components/shared/view/BasicPopup.vue
+++ b/components/shared/view/BasicPopup.vue
@@ -14,14 +14,17 @@
   </v-tippy>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-
-@Component({})
-export default class BasicPopup extends Vue {
-  @Prop({ default: () => [100, 800] }) delay?: [number, number]
-  @Prop({ type: String, default: 'bottom' }) placement?: string
-}
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    delay?: [number, number]
+    placement?: string
+  }>(),
+  {
+    delay: () => [100, 800],
+    placement: 'bottom',
+  }
+)
 </script>
 
 <style lang="scss" scoped>