Nuxt.js: Where to put code that runs once on app startup (no main.js)

Created on 4 Jun 2017 · 3Comments · Source: nuxt/nuxt.js

In non nuxjs apps you put code that has run once on app startup in main.js or app.vue. Both are not available in nuxtjs. Where do I put this code?

_{This question is available on Nuxt.js community (#c718)}

Source

Paperasse

Most helpful comment

You can create a plugin for this @Paperasse

nuxt.config.js:

module.exports = {
  plugins: [
    { ssr: false, src: '~plugins/hello' }
  ]
}

plugins/hello.js:

window.onNuxtReady(() => {
  console.log('Nuxt.js is ready and mounted')
})

Atinux on 4 Jun 2017

👍4

All 3 comments

You can create a plugin for this @Paperasse

nuxt.config.js:

module.exports = {
  plugins: [
    { ssr: false, src: '~plugins/hello' }
  ]
}

plugins/hello.js:

window.onNuxtReady(() => {
  console.log('Nuxt.js is ready and mounted')
})

Atinux on 4 Jun 2017

👍4

The ~ can be left off regular plugins, but is required for ssr:false plugins:

  plugins: [
    'plugins/bootstrap-vue.js',  // <- Works
    'plugins/scroll.js',
    { ssr: false, src: '~plugins/etc.js' },  // <- requries ~
  ]

Without the ~ in the ssr:false plugin, I was getting a runtime error about here:

            }
            // if childNode is not null, it means the actual childNodes list is
            // longer than the virtual children list.
            if (!childrenMatch || childNode) {
              /* istanbul ignore if */
              if (process.env.NODE_ENV !== 'production' &&
                typeof console !== 'undefined' &&
                !hydrationBailed
              ) {
                hydrationBailed = true;
                console.warn('Parent: ', elm);
                console.warn('Mismatching childNodes vs. VNodes: ', elm.childNodes, children);
              }
              return false
            }