[Vuejs]-I'm trying remake a javascript code for collision detection in Vue.js

by

0👍

✅

The error you’re getting is because Nuxt has a server-side context where it’s trying to pre-fetch the data for you and pre-render it.

https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

What you need to do is ensure you’re running that code only on the client-side. I know this sounds confusing, but remember Nuxt is a universal framework, and it tries to render your site on the backend to improve your SEO and yield the initial markup. That’s why you’re getting the error.

What you can do is wrap the code that’s using the document in an if to make sure you’re only running it client-side

created:function(){
  if (process.client) {
      this.myFunction()
  }
},

The added complexity you’re facing is coming from Nuxt, and not Vue.JS 🙂

EDIT I’ve noticed a lot of mistakes in your question’s code, so if you could please correct them it would be nice! I’ve gone ahead and created an example CodeSanbox with a working solution to your problem which you can checkout. The problem I noticed are:

  • You have syntax error forgetting accessing this.dragMe and this.rect
  • You didn’t return an object in your data ( this is a very important one! )
  • the pasted code isn’t syntaxly correct

Having said all of that here is a working solution from CodeSandbox:
https://codesandbox.io/s/zen-panini-n6j8c?file=/pages/index.vue

Leave a comment