Removed context.root from every component

[onmax]

As we have said, 2025 is going to be the focus for moving away from Vue 2 to Vue 3. This task is tremendous, but we can always do small bits.

I have removed context.root calls and move it away from context to different places, so once we move to vue 3, we just need to change the import.

Here are the key changes

useRouter & useRoute

Before my PR

defineComponent({
	setup(props, context) {
		context.root.$router.push();
		context.root.$route.name;
	}
})

After my PR

import { useRouter } from "@/router";

defineComponent({
	setup() {
		const router = useRouter()
		router.push();
		router.currentRoute.name;
	}
})

How does useRouter work under-the-hood?

In app.vue we provide the context.root.router to the app.
Then inside useRouter we just use inject it.

After Vue 3

import { useRouter } from "@/router";

const router = useRouter()
router.push();
router.currentRoute.name;

useI18n

Before my PR

defineComponent({
	setup(props, context) {
		context.root.$i18n.t('Translate me');	
		context.root.$t('Translate me');
		context.root.locale;
		context.root.$tc('transalte with variable');
	}
})

After my PR

import { useI18n } from "@/lib/i18n";

defineComponent({
	setup(props, context) {
		const { $t, $tc, locale } = useI18n(); 
		$t('Translate me');	
		$tc('Translate me');
	}
})

How does useI18n work under-the-hood?

In app.vue we provide the context.root.$i18n to the app.
Then inside useI18n we just use inject it.

import { useI18n } from "@/lib/i18n";

const { $t, $tc, locale } = useI18n(); 
$t('Translate me');	
$tc('Translate me');

Next Tick

Before my PR

defineComponent({
	setup(props, context) {
		context.root.$nextTick();
	}
})

My PR

import { nextTick } from "@/lib/nextTick"; // My PR

defineComponent({
	setup(props, context) {
		nextTick();
	}
})

Vue 3!

Once we move to vue 3 will become (if we decide to not use auto-imports 😉)

import { nextTick } from "vue"; 

nextTick();

Missing context definitions

We still need to use context to define refs and emit, which I am not aware that we do a similar approach to ease the transition to vue 3. If you have an idea, please let me know.

[sisou]

Very cool!