Deactivate/Activate Plugin for certain pages

[Fabioni]

I would like to activate the plugin only for certain pages.

Best would be to enable or disable it inside the export default {} of the pages, or by having a function in the nuxt.config settings that return the pages for which the plugin should be activated.

[harlan-zw]

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?

[harlan-zw]

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

[oppianmatt]

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)

[oppianmatt]

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

[harlan-zw]

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/**'
    ],
  },
}

[danmindru]

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

[Fabioni]

Same here. I am only using nuxt-2

[harlan-zw]

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.

[Fabioni]

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.

[junkym0nk3y]

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']}],
],

[harlan-zw]

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.