SSR compatibility

[joshbotnet]

Hey @marcosmoura and team, I'm integrating Vue Material with Nuxt (which uses SSR) as per their plugins instructions and get [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. so I created an issue over there if you want to have a look - might be good for both projects - nuxt/nuxt#76

[joshbotnet]

Apparently Vue Material could be updated to work with SSR

[marcosmoura]

This will be developed for the next version. Also I would love to see a PR with this fix. :D

[stbaer]

@marcosmoura - why is it not working with ssr? Some info and I may attempt a pull request. Been trying to use it with nuxt.js but debugging from there is somewhat hard.

[marcosmoura]

Well. Right now the API rely on "window" and "document" to be rendered. I will need to change every single component to make it work.

[ram-you]

@marcosmoura
We are moving forward in our project based on "vue-hackernews-2.0". We want to integrate "Vue Material" but with the SSR rendering problem we can not use it. We hoped the solution with version 0.6 but now it is postponed to 0.7.
We praise the huge quantity and quality of your work and hope that the solution will not exceed 0.7.
Thank you very much.

[marcosmoura]

Hi @ram-you

The only problem with the SSR solution, to be developed, is the large amount of testing and adaptations to the codebase. That's why I postponed it, because I already had a lot of features ready to be released and the SSR feature was holding them. I will try to prioritize this to be on 0.7.0.

[ram-you]

Thank you Marcos. I am confident that this will attract many more users. Because most of those who have migrated to Vue.js is mainly for server-side rendering. Thank you again and good luck.

[shelakel]

Hi @marcosmoura,

Out of curiosity I checked out this repo to get an idea of what would be involved in making it SSR compatible.

Besides the document and window global variables being undefined, the following 2 dependencies are not SSR compatible:

• element.scrollintoviewifneeded-polyfill imported by mdMenuItem.vue
• vue-style-loader

I reckon the cleanest approach would be to split server and browser builds and shim window methods such as setTimeout in the render path to execute without a delay for SSR.

[dohomi]

One thing to mention here as I saw this in another issue on NUXT. The upcoming Vue 2.2 release will offer server and client support for vue-style-loader. Here is the reference where I found it: nuxt/nuxt#12 (comment)

[marcosmoura]

Yeah. There is some points that should be fixed in order to make the SSR support to work.

[u12206050]

Looking forward to the release of this feature. Finished an entire project after switching from Angular 2 thinking that everything is already in place for SSR, but am just waiting now for ssr in vue-material. Nice work on the components though, I must say it was very intuitive to use.

Just thought I would also share a workaround fix that we used on another component to get ssr working, since the component is mostly for animating when a user does a certain event, there was no need to really render it besides its' data on SSR, and thus we just by past the code that used window. Since most of vue-material is also mostly just modifying what is where and how, could it be a simple fix to by pass anything that any ways won't matter on the server? For example scroll events, since no scrolling is taking place on the server anyways.

[jevojipi]

Hello. Any news on that matter? Also trying to get it work with NUXT. Both are GREAT projects, would be happy if they play well together.

[roslaneshellanoo]

+1 for compatibility with nuxt

[cawa-93]

Just inform about the current situation. I try use it today and get this error:

Vue.js error

ReferenceError: document is not defined
    at Object.defineProperty.value (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:9:11279)
    at e (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:6:369)
    at Object.<anonymous> (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:10:18827)
    at e (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:6:369)
    at Object.t.__esModule.default (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:7:5309)
    at e (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:6:369)
    at Object.o (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:7:386)
    at e (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:6:369)
    at Object.<anonymous> (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:11:14365)
    at e (D:\Develop\fb-scaner\node_modules\vue-material\dist\vue-material.js:6:369)

I already dream about the release of version 0.8 and the support of the SSR

[sebastianmacias]

I'm in the same position. I'm starting a new nuxt.js project and I'm going to have to use vuetifyjs instead of vue-material due to the lack of SSR support

[nahtnam]

Same here, have to chose vuetify over vue material due to lack of ssr

[drozdzynski]

I have nuxt.js and use vue-material with this code (nuxt plugin):

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  var VueMaterial = require('vue-material')
  Vue.use(VueMaterial.MdCore)
}

But waiting for SSR 👍

[kodekoder]

@drozdzynski this code is not working. How did you set this up?

[drozdzynski]

@jerakode I wrote it in march, so now this is able to not work, I stop working with this library, so I don't know how to make it work now.

[kodekoder]

@drozdzynski cool, ok. Any advice what framework works nice with Nuxt, beside Vuetify? I am so struggling right now with that.

[sebastianmacias]

@jerakode what's wrong with Vuetify?

[ram-you]

@sebastianmacias
Vuetfy.js seems to be very promising but it is still in "Pre-release" phase and it still lacks a lot of functionality so not yet "Production ready".

[dohomi]

@ram-you same as vue-material all current implementation of material design didn't reach 1.0 yet. There are a couple of libraries out but in my opinion - if SSR is required - use vuetify. The gitter channel is very active @jerakode. I don't want to highjack this conversation just want to give my personal opinion. I was using vue-material in the beginning but due to the use of NUXT I had to replace it - couldn't set it straight with client-server hydration

[kodekoder]

@sebastianmacias I don't need 600kb of Vuetify just to use 2-3 component. It's too opinionated. I have my own base, I just need few interactive UI elements. I tried to integrate mdc, but it's so stupidly build, so I drop it.

[kodekoder]

@dohomi so, basicaly, vue-material is not working fine with Nuxt, right?

[dohomi]

@jerakode please check the source: https://github.com/vuetifyjs/vuetify/blob/master/dist/vuetify.min.js
https://github.com/vuetifyjs/vuetify/blob/master/dist/vuetify.min.css
And this is before gzip. In my app the whole source with Vue Vuex Vuetify and some other vendor packages after gzip is roughly 110kb on NUXT
If you tried already vue-mdc maybe try muse-ui, in the release notes it states they support SSR

vue-material didn't do it for me, on any code-refresh the app crashed.

[kodekoder]

vue-mdc seems very early stage, I can't make it work at all. No docs, no help. I tried original mdc, but was able to load only CSS version.

muse-ui looks very nice, I forgot about it. Will try.

The blank original vuetify/nuxt starter weights over 700kb. When clean Nuxt starter in approx 150kb. Haven't tried gzip tho.

[Muscot]

I tried out a solution, that seems to work. I'm not sure if it's good or a bad :-) , what do you think?

My vue-material nuxt plugin:

if (!process.BROWSER_BUILD) {
const jsdom = require('jsdom')
const { JSDOM } = jsdom
const dom = new JSDOM(``)
global.window = dom.window
global.document = dom.window.document
global.Element = dom.window.Element
}

var Vue = require('vue')
var VueMaterial = require('vue-material')
Vue.use(VueMaterial)

[felipekm]

Hey @marcosmoura, any plans to release it?
I see a lot of devs moving to vuetify becase of this case.

[marcosmoura]

Yep. I know. The new version is coming. With SSR Support. Finally!

[ram-you]

@felipekm
Its a little late for me. I have already migrated all my existing projects and those that are under development towards Vuetify.
Because I prefer VueMaterial spirit, perhaps, no I'm sure, it will be for future projects.

[felipekm]

Yeah @ram-you same feeling here, anyway I will wait for few days.
@marcosmoura let us know if any help is needed, let's make it happen.

[marcosmoura]

Any kind of help will be appreciated. I will create a roadmap this week for you guys follow the progress.

[hackuun]

@ram-you you forget to mention, that it could be late for you, but not the others.
@marcosmoura cool, will wait for updates. For some reason, I like vue-material better then vuetify 😄

[marcosmoura]

@iamdubx Me too! :P

[ram-you]

@iamdubx of course for me. Never late for the community.

[sandeshdamkondwar]

Same here

[Samuell1]

Enhanced SSR Support is in 1.0.0-beta5!

[christophwolff]

When i use a mdbutton with nuxt i get a document is not defined in my pages

[Samuell1]

@christophwolff its weird because mdButton doesnt have any document in code

[Awais-cb]

Any update on this?

[christophwolff]

@Awais-cb Try to use it as a non SSR Nuxt plugin. Should work then.

https://nuxtjs.org/guide/plugins/#client-side-only

[Awais-cb]

thanks for your response chris will try as you suggested i have just one more question to ask will it effect my site's ranking for seo?