diff --git a/lib/module.js b/lib/module.js index e192a683..85c08047 100644 --- a/lib/module.js +++ b/lib/module.js @@ -21,24 +21,28 @@ export default async function (moduleOptions) { ...moduleOptions }, defaults) - // Add all templates - const templatesDir = resolve(__dirname, 'templates') - await addTemplates.call(this, templatesDir, 'color-mode', options) - // Add script to head to detect user or system preference before loading Nuxt (for SSR) const scriptPath = resolve(__dirname, 'script.min.js') const scriptT = await fsp.readFile(scriptPath, 'utf-8') const script = template(scriptT)({ options }) - /* istanbul ignore next */ - this.options.head.script = this.options.head.script || [] - this.options.head.script.push({ - hid: options.hid, - innerHTML: script, - pbody: true + options.script = script + + this.nuxt.hook('vue-renderer:spa:prepareContext', ({ head }) => { + const script = { + hid: options.hid, + innerHTML: options.script, + pbody: true + } + + head.script.push(script) + + const serializeProp = '__dangerouslyDisableSanitizersByTagID' + head[serializeProp] = head[serializeProp] || {} + head[serializeProp][options.hid] = ['innerHTML'] }) - const serializeProp = '__dangerouslyDisableSanitizersByTagID' - this.options.head[serializeProp] = this.options.head[serializeProp] || {} - this.options.head[serializeProp][options.hid] = ['innerHTML'] + // Add all templates + const templatesDir = resolve(__dirname, 'templates') + await addTemplates.call(this, templatesDir, 'color-mode', options) } diff --git a/lib/templates/plugin.server.js b/lib/templates/plugin.server.js index 1f011be9..52a96792 100644 --- a/lib/templates/plugin.server.js +++ b/lib/templates/plugin.server.js @@ -3,7 +3,19 @@ import colorSchemeComponent from './color-scheme' Vue.component('<%= options.componentName %>', colorSchemeComponent) +const script = { + hid: '<%= options.hid %>', + innerHTML: `<%= options.script %>`, + pbody: true +} + export default function (ctx, inject) { + ctx.app.head.script.push(script) + + const serializeProp = '__dangerouslyDisableSanitizersByTagID' + ctx.app.head[serializeProp] = ctx.app.head[serializeProp] || {} + ctx.app.head[serializeProp]['<%= options.hid %>'] = ['innerHTML'] + const preference = '<%= options.preference %>' const colorMode = {