Nuxt 2: Deactivate/Activate Plugin for certain pages about nuxt-delay-hydration HOT 11 CLOSED

Same here. I am only using nuxt-2

from nuxt-delay-hydration.

Thanks for the idea. This is available with v1 of the module, which only supports Nuxt v3. I won't be porting it back to the v0 version.

// nuxt.config.ts
export default {
  delayHydration: {
    include: [
      '/**',
    ],
    exclude: [
      '/admin/**'
    ],
  },
}

from nuxt-delay-hydration.

Thanks for letting me know, I chose not to include this for Nuxt v2 due to the effort involved.

I've re-opened the issue as I may re-consider it, but at this stage, I have other priorities to work on sorry.

from nuxt-delay-hydration.

I found a solution, I've got a build module that rewrites the js (like the author has done with nuxt) and I replace this part

    const replace = `
      const hydrationEvent = window.location.pathname.match(${URLS_TO_SKIP}) ?
        false :
        await delayHydration()
    `

    template.replace('const hydrationEvent = await delayHydration()', replace)

where URLS_TO_SKIP is a regex of URLs I would like to bypass delay hydration

but this could be added to the original module and made a setting

from nuxt-delay-hydration.

Hey @Fabioni

This is a good idea if there are only certain pages you need to run with init or mount mode.

Could you confirm if manual mode and DelayHydration component can't be used to achieve what you want though?

from nuxt-delay-hydration.

Going to close this off as there's been no reply. Feel free to re-open if the above doesn't apply and you would still like the feature

from nuxt-delay-hydration.

I too am interested in this but manual mode doesn't cut it as the nuxt app is mounted and plugins fire increasing blocking time.

Perhaps the inject hydrate API can be put on the component, and then in beforeCreate on the component it could call hydrate now on the pages we would want to hydrate straight away (like heavy UI js pages that aren't for SEO)

from nuxt-delay-hydration.

darn, too bad it's only for nuxt 3. Was just looking for this in v0. 💔

from nuxt-delay-hydration.

Thanks for letting me know, I chose not to include this for Nuxt v2 due to the effort involved.

I've re-opened the issue as I may re-consider it, but at this stage, I have other priorities to work on sorry.

Thanks @harlan-zw for reopening this issue. I will really appreciate if you find the time to do that. Unfortunately I can only use your plugin once this feature exist.

from nuxt-delay-hydration.

oppianmatt
Thanks for clue.

I made (with my colleague) a new module, that works in mount mode

import fs from 'fs';

export default function nuxtDelayHydrationExclude(config) {
    const excludePaths = config.excludePaths;
    const URLS_TO_SKIP = new RegExp(`^(${excludePaths.join('|')})(\\/|$)|(^|\\/+)(${excludePaths.join('|')})(\\/|$)`);

    this.nuxt.hook('build:templates', ({
        templatesFiles,
    }) => {
        const clientTemplate = templatesFiles.find(t => t.dst === 'client.js');

        if (clientTemplate) {
            const fileContent = fs.readFileSync(clientTemplate.src, {encoding: 'utf-8'});
            const replace = `
                const delayDisabled = window.location.pathname.match(${URLS_TO_SKIP})
                delayDisabled ?
                    false :
                    await delayHydration()
                console.warn('delay-hydration is:', delayDisabled ? 'disabled' : 'enabled')
            `;

            const regex = /(?<!const\s+hydrationEvent\s+=\s+)(await\s+delayHydration\(\))/g;
            const modifiedContent = fileContent.replace(regex, replace);
            fs.writeFileSync(clientTemplate.src, modifiedContent, 'utf-8');
        }
    });
}

If it is needed for someone, just add it right after 'nuxt-delay-hydration' in modules section:

modules: [
    'nuxt-delay-hydration',
    // excludePaths – will includes all subpages
    ['~/config/modules/nuxtDelayHydrationExclude', {excludePaths: ['/page1', '/page2']}],
],

from nuxt-delay-hydration.

The Nuxt 2 module is deprecated and won't receive any new updates from here on out, sorry.

Feel free to use the above work around though.

from nuxt-delay-hydration.