hjl19911127/vue-drawer-layout

not working with NUXT

heshamelmasry77 opened this issue · 7 comments

heshamelmasry77 commented

{ TypeError: Cannot read property 'middleware' of undefined
at module.exports.webpack_exports.default (.nuxt/server.js:115:0)
at process._tickCallback (internal/process/next_tick.js:68:7) statusCode: 500, name: 'TypeError' }

hjl19911127 commented

Thanks for your feedback.I'm trying to confirm this problem.

  • 👍1
hjl19911127 commented

Would you mind offering me more information about this problem ?Looks like your problem is about a variable named 'middleware' .Could you show me some source code around this problem?

sbefort commented

It does not work with Nuxt because Nuxt is for both server-side and client-side rendering. The component references the window object, which is not available on the server. We can fix this by adding conditions to check whether or not the component has been loaded on the server or client.

What is the purpose of this code?

window.addEventListener("test", null, opts);

It's on line 23 of DrawerLayout.vue.

  • 👍1
hjl19911127 commented

It a detection of passive event.

hjl19911127 commented

I found that it is wrapped in try..catch block. Will it still be wrong? So do you got any suggestion about the question?

sbefort commented

I don't think your code should reference the window object until the mounted life cycle hook is called. That will guarantee that the component has been loaded in the browser rather than the server. If you can do that, your component will work with server-side rendering frameworks like Nuxt.

mounted() is only executed on the client side.

  • 👍1
hjl19911127 commented

I publish v0.3.5 that put it in mounted hook.Hope you try it.:)