Running vanilla js eventlistener inside vue lifecycle hook

I want to have a preloader that appears until all the resources has been loaded.

import { onMounted, ref } from "vue";

const hasLoaded = ref(false);

onMounted(() => {
	window.addEventListener('load', () => {
		hasLoaded = !hasLoaded; 
	});
});

I just want to ask if this is just fine? Like, I'm not violating rules, semantics, conventions or anything?

MaverickChan

1 year ago

Level 47

vue has load directive , you can use it.

<template>
	<div @load="dosth">
	</div>
</template>
<script setup>
	const dosth = () => {
		//do something...
	}
</script>

Please or to participate in this conversation.