[2.x] Upgrade VueJS to version 3

[octoper]

Upgrade Inertia stack from VueJS v2 to VueJS v3

[driesvints]

@octoper fyi: this PR won't be reviewed until it's out of draft

[octoper]

Yeah I know that's why I marked it as daft 😅

[octoper]

cc @driesvints Ready for review!

[driesvints]

@octoper can you please fix the StyleCI warnings so everything's green?

[octoper]

@driesvints Done!

[driesvints]

@reinink does this look good to you?

[taylorotwell]

So where does this get removed now?

[octoper]

Whoops totally forgot about that, I will add it tommorow, this hook removed at first because the depreciation of $once function
but this willbe moved in the beforeUnmount lifecycle hook without the $once function

[reinink]

I haven't tested this, but do you really need the <div id="modal"></div>? I think you can just do to="body". Also, I'm pretty sure even Vue uses the lowercase version of <teleport> in their docs, so that might be more idiomatic.

Suggested change

	<Teleport to="#modal">
	<teleport to="body">

[reinink]

Suggested change

	</Teleport>
	</teleport>

[reinink]

Not required, as per comment above.

Suggested change

	<!-- Modal Teleport -->
	<div id="modal"></div>

[reinink]

Missing space.

Suggested change

	<jet-checkbox name="terms" id="terms" v-model:checked="form.terms"/>
	<jet-checkbox name="terms" id="terms" v-model:checked="form.terms" />

[reinink]

Might be worth bumping this to 0.8.4, given the recent axios vulnerability (see here).

Suggested change

	'@inertiajs/inertia' => '^0.8.2',
	'@inertiajs/inertia' => '^0.8.4',

[octoper]

Fixed everything @reinink and @taylorotwell mentioned

[reinink]

Hmm, does redefining the entire function actually work when removing it? I don't think so. I think you need the reference to the original function to remove it.

Here's what I believe is the proper Vue 3 way to handle this. Remove both the mounted() and unmounted() methods, and then add a new setup() method instead. Something like this:

import { onMounted, onUnmounted } from 'vue'

setup () {
  const closeOnEscape = (e) => {
      if (this.open && e.keyCode === 27) {
          this.open = false
      }
  }
  
  onMounted(() => document.addEventListener('keydown', closeOnEscape))
  onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
},

Again, this is untested, so definitely do test it, but this should work. 👍

[reinink]

However we solve this in the Dropdown.vue component, needs to also be done here.

[taylorotwell]

@octoper is this PR ready to go from your perspective now?

[octoper]

Yeah it's ready from me @taylorotwell

[khatabwedaa]

when this will be merged?

[taylorotwell]

Thanks!

[AbdelElrafa]

@taylorotwell will you be tagging a release soon so that this can be used, or should I just target the branch?

[driesvints]

@AbdelElrafa releases are always done on Tuesdays. You should only ever target a dev branch for development and not for production releases.