🔧 vue3 composition api pages

pages/_prefix/collection/_id/activity.vue

@@ -8,56 +8,52 @@
 
 <script lang="ts">
 import Activity from '@/components/collection/activity/Activity.vue'
-import ExperimentMixin from '@/utils/mixins/experimentMixin'
-import { Component, mixins } from 'nuxt-property-decorator'
 import { useHistoryStore } from '@/stores/history'
-import { generateCollectionImage } from '@/utils/seoImageGenerator'
-import { CurrentCollection } from './index.vue'
 import { usePreferencesStore } from '@/stores/preferences'
+import { generateCollectionImage } from '@/utils/seoImageGenerator'
 
-@Component<CollectionActivityPage>({
+export default {
  name: 'CollectionActivityPage',
  components: {
  Activity,
  },
- layout() {
- return 'explore-layout'
+ layout: 'explore-layout',
+ setup() {
+ const preferencesStore = usePreferencesStore()
+ const isSidebarOpen = computed(
+ () => preferencesStore.getsidebarFilterCollapse
+ )
+
+ return {
+ isSidebarOpen,
+ }
  },
  head() {
- const title = this.currentlyViewedCollection.name
+ const historyStore = useHistoryStore()
+ const currentlyViewedCollection = computed(
+ () => historyStore.getCurrentlyViewedCollection
+ )
+ const image = computed(() => {
+ return generateCollectionImage(
+ currentlyViewedCollection.value.name,
+ currentlyViewedCollection.value.numberOfItems,
+ currentlyViewedCollection.value.image
+ )
+ })
+ const title = currentlyViewedCollection.value.name
  const metaData = {
  title,
  type: 'profile',
- description: this.currentlyViewedCollection.description,
+ description: currentlyViewedCollection.value.description,
  url: this.$route.path,
- image: this.image,
+ image: image.value,
  }
+
  return {
  title,
  meta: [...this.$seoMeta(metaData)],
  }
  },
-})
-export default class CollectionActivityPage extends mixins(ExperimentMixin) {
- private historyStore = useHistoryStore()
- get preferencesStore() {
- return usePreferencesStore()
- }
- get isSidebarOpen() {
- return this.preferencesStore.getsidebarFilterCollapse
- }
-
- get currentlyViewedCollection(): CurrentCollection {
- return this.historyStore.getCurrentlyViewedCollection
- }
-
- get image(): string {
- return generateCollectionImage(
- this.currentlyViewedCollection.name,
- this.currentlyViewedCollection.numberOfItems,
- this.currentlyViewedCollection.image
- )
- }
 }
 </script>
 

pages/_prefix/explore/collectibles.vue

@@ -5,29 +5,24 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-
-const components = {}
-
-@Component<ExploreCollectibles>({
- components,
- layout() {
- return 'explore-layout'
- },
+export default {
+ name: 'ExploreCollectibles',
+ layout: 'explore-layout',
  head() {
+ const { $route } = useNuxtApp()
+ const runtimeConfig = useRuntimeConfig()
  const title = 'Low minting fees and carbonless NFTs'
  const metaData = {
  title,
  type: 'profile',
  description: 'Buy Carbonless NFTs on Kusama',
- url: `/${this.$route.params.prefix}/explore/collectibles`,
- image: `${this.$config.public.baseUrl}/k_card.png`,
+ url: `/${$route.params.prefix}/explore/collectibles`,
+ image: `${runtimeConfig.public.baseUrl}/k_card.png`,
  }
  return {
  title,
  meta: [...this.$seoMeta(metaData)],
  }
  },
-})
-export default class ExploreCollectibles extends Vue {}
+}
 </script>

pages/_prefix/explore/items.vue

@@ -7,40 +7,41 @@
 </template>
 
 <script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
-import ExperimentMixin from '@/utils/mixins/experimentMixin'
 import Items from '@/components/items/Items.vue'
 import { usePreferencesStore } from '@/stores/preferences'
 
-const components = { Items }
+export default {
+ name: 'ExploreItems',
+ components: {
+ Items,
+ },
+ layout: 'explore-layout',
+ setup() {
+ const preferencesStore = usePreferencesStore()
+ const isSidebarOpen = computed(
+ () => preferencesStore.getsidebarFilterCollapse
+ )
 
-@Component<ExploreItems>({
- components,
- layout() {
- return 'explore-layout'
+ return {
+ isSidebarOpen,
+ }
  },
  head() {
+ const { $route } = useNuxtApp()
+ const runtimeConfig = useRuntimeConfig()
  const title = 'Low minting fees and carbonless NFTs'
  const metaData = {
  title,
  type: 'profile',
  description: 'Buy Carbonless NFTs on Kusama',
- url: `/${this.$route.params.prefix}/explore/items`,
- image: `${this.$config.public.baseUrl}/k_card.png`,
+ url: `/${$route.params.prefix}/explore/items`,
+ image: `${runtimeConfig.public.baseUrl}/k_card.png`,
  }
  return {
  title,
  meta: [...this.$seoMeta(metaData)],
  }
  },
-})
-export default class ExploreItems extends mixins(ExperimentMixin) {
- get preferencesStore() {
- return usePreferencesStore()
- }
- get isSidebarOpen() {
- return this.preferencesStore.getsidebarFilterCollapse
- }
 }
 </script>
 

pages/identity.vue

@@ -3,17 +3,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
 import Identity from '@/components/common/IdentityForm.vue'
 
-@Component({
+export default {
+ name: 'IdentityPage',
  components: {
  Identity,
  },
-})
-export default class IdentityPage extends Vue {
- layout() {
- return 'centered-half-layout'
- }
+ layout: 'centered-half-layout',
 }
 </script>

pages/sustainability.vue

@@ -104,26 +104,27 @@
  </ul>
  </div>
 </template>
+
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
 import { NeoIcon } from '@kodadot1/brick'
-@Component<Sustainibility>({
+
+export default {
+ name: 'Sustainibility',
+ components: {
+ NeoIcon,
+ },
+ layout: 'centered-half-layout',
  head() {
+ const runtimeConfig = useRuntimeConfig()
  const metaData = {
  type: 'article',
  description: 'KodaDot: Sustainibility mission',
  url: '/sustainibility',
- image: `${this.$config.public.baseUrl}/k_card.png`,
+ image: `${runtimeConfig.public.baseUrl}/k_card.png`,
  }
  return {
  meta: [...this.$seoMeta(metaData)],
  }
  },
- components: { NeoIcon },
-})
-export default class Sustainibility extends Vue {
- layout() {
- return 'centered-half-layout'
- }
 }
 </script>

tests/cypress/e2e/components/media.cy.ts

@@ -34,7 +34,7 @@ describe(
  () => {
  mediaType.forEach(({ url, title, collection, type }) => {
  it(`should render ${type} in Media component`, () => {
- cy.visit(`${url}?redesign=true`)
+ cy.visit(url)
 
  cy.getCy(`type-${type}`)
  .should('exist')