CODEWITHSUNDEEP
vuejs2nuxt.js
redshift
redshift

Reputation: 5217

Nuxt: Page crashing on page reload

Anyone know why a sub page crashes when user reloads the page? It is fine when you navigate to the page using nuxt-link from another page (using route params), but when the user reloads/refreshes the page, it will crash.

Here is my sandbox where you can test it out: Codesandbox

Code from nuxt link:

<nuxt-link :to="{name: 'photos-id-title', params: { id: photo.id, title: photo.title }}">

Code from photo details page:

<template>
  <section>
    <!-- <template v-if="photo"> -->
    <img
      :id="photo.filename"
      :src="photo.url"
      class="img-fluid thumbnail rounded"
      :alt="photo.title"
    />
    <h1 class="h3">{{ photo.title }}</h1>
  </section>
</template>

<script>
import { Annotorious } from '@recogito/annotorious'
export default {
  data() {
    return {
      photo: {},
      anno: {},
      title: this.$route.params.title
    }
  },
  async mounted() {
    await this.getPhotoDoc()
    this.anno = await new Annotorious({ image: this.photo.filename })
  },
  methods: {
    async getPhotoDoc() {
      const docRef = await this.$fireStore
        .collection('photos')
        .doc(this.$route.params.id)
        .get()
      try {
        if (docRef.exists) {
          // data() returns all data about the doc
          console.log('got the doc: ', docRef.data())
          this.photo = docRef.data()
        } else {
          console.log('no docs exist')
        }
      } catch (error) {
        console.log('Error getting document:', error)
      }
    }
  },
  head() {
    return {
      title: this.photo.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.photo.description
        }
      ]
    }
  }
}
</script>

User journey: Click PHOTOS from navbar, select any photo on the page. You shall see a "photo detail" page. Loads fine. Try to refresh the page -- it will crash.

Note: I also have this scaffolded in a regular/plain vue app using Vue-cli and have NO issues. Only seems to be a problem with Nuxt. Must be SSR related?

Thanks for any help...

Upvotes: 2

Views: 4039

Answers (1)

dummker
dummker

Reputation: 325

If you think this is SSR related and the Annotorious plugin might cause the problem try this:

  1. nuxt.config.js add the plugin with mode client
plugins: [
    { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  ]

You can find more information in the nuxtjs docs here

Upvotes: 2

Related Questions