fix: image flicker during hydration and nuxt devtools (#65)

Author: PavelKopecky

app/layouts/default.vue

@@ -57,14 +57,8 @@
 	}
 
 	onMounted(async () => {
-		// clear SSR'd components
-		headerInstance.value?.teardown?.();
-		footerInstance.value?.teardown?.();
-		footerHtml.value = '';
-		headerHtml.value = '';
-
-		footerInstance.value = new Footer({ target: footerEl.value });
-		headerInstance.value = new Header({ target: headerEl.value });
+		footerInstance.value = new Footer({ target: footerEl.value, enhance: true });
+		headerInstance.value = new Header({ target: headerEl.value, enhance: true });
 		headerInstance.value.set('@global.app.signIn', auth.signIn);
 		headerInstance.value.set('@global.app.signOut', auth.signOut);
 		headerInstance.value.set('additionalClasses', 'header-with-globalping-bg');

eslint.config.cjs

@@ -36,7 +36,7 @@ module.exports = createConfigForNuxt().prepend(
 	},
 	// Nuxt rules
 	{
-		files: [ 'app/**' ],
+		files: [ 'app/**', '*.ts' ],
 		rules: {
 			'import/order': [ 'error', {
 				distinctGroup: false,

nuxt.config.ts

@@ -134,6 +134,13 @@ export default defineNuxtConfig({
 				};
 			}
 		},
+		'build:manifest': (manifest) => {
+			for (const file of Object.values(manifest)) {
+				if (file.resourceType === 'image') {
+					file.prefetch = false;
+				}
+			}
+		},
 	},
 	nitro: {
 		externals: {

src/index.js

@@ -257,7 +257,9 @@ router.get('/auth/callback', '/auth/callback', async (ctx) => {
 /**
  * Nuxt routes and files.
  */
-const NUXT_ROUTES = [ '/cli', '/_nuxt' ];
+const NUXT_DEV_ONLY_ROUTES = [ '/__nuxt_devtools__' ];
+const NUXT_PROD_ONLY_ROUTES = [];
+const NUXT_ROUTES = [ '/cli', '/_nuxt', ...isDev ? NUXT_DEV_ONLY_ROUTES : NUXT_PROD_ONLY_ROUTES ];
 
 router.use(async (ctx, next) => {
 	if (NUXT_ROUTES.some(route => ctx.req.path.startsWith(`${route}/`) || ctx.req.path === route)) {