Nuxt.js: Vue Material integration

[joshbotnet]

@Atinux and @marcosmoura please describe how to integrate Vue Material
https://github.com/marcosmoura/vue-material

I followed the Vue Material installation and Nuxt plugins instructions, and ended up with HTMLElement is not defined so please confirm and advise

Both awesome projects btw ⭐️ thanks

ReferenceError: HTMLElement is not defined
    at /Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:8:31912
    at Object.<anonymous> (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:9:188)
    at e (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:1:394)
    at Object.t.__esModule.default (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:6:14434)
    at e (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:1:394)
    at Object.defineProperty.value (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:6:22870)
    at e (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:1:394)
    at Object.<anonymous> (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:10:4156)
    at e (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:1:394)
    at Object.defineProperty.value (/Users/josh/Static/teachest/nuxt/node_modules/vue-material/dist/vue-material.js:1:515)

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

[joshbotnet]

Using if (process.BROWSER_BUILD) { in the plugin, it works 😸 but with Warnings:

Mismatching childNodes vs. VNodes

and

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 

[alexchopin]

Hi,

This is the best solution for using vue-material with Nuxt right now because it seems that SSR is not supported by this library.

It should be easy to fix for @marcosmoura in a future release.

[dohomi]

Are you guys sure that this is supposed to work like this? I tried this inside of my plugins/vue-material.js file:

import Vue from 'vue';
import VueMaterial from 'vue-material';

if (process.BROWSER_BUILD) {
    Vue.use(VueMaterial.mdCore);
    Vue.use(VueMaterial.mdButton);
    Vue.use(VueMaterial.mdIcon);
    Vue.use(VueMaterial.mdInputContainer);
    Vue.use(VueMaterial.mdSelect);
}

And enabled the plugin inside of nuxt.config.js. But I still receive the error message ReferenceError: window is not defined. Anything I missed?

[lmj0011]

Same problem for this vue lib: https://github.com/Wanderxx/vue-fullcalendar

[dohomi]

I solved it inside of my *.vue file:

mounted(){
            // remove this if SSR is supported
            window.onNuxtReady(() => {
                this.isReady = true;
            });
        }

and plugins:

import Vue from 'vue';

if (process.BROWSER_BUILD) {
    window.onNuxtReady(() => {
        const VueMaterial = require('vue-material');

        // Vue.use(VueMaterial);
        Vue.use(VueMaterial.MdCore);
        Vue.use(VueMaterial.MdButton);
        Vue.use(VueMaterial.MdIcon);
        Vue.use(VueMaterial.MdInputContainer);
        Vue.use(VueMaterial.MdSelect);
        Vue.use(VueMaterial.MdMenu);
        Vue.use(VueMaterial.MdList);
        Vue.use(VueMaterial.MdBackdrop);
        Vue.use(VueMaterial.MdCheckbox);
        Vue.use(VueMaterial.MdSpinner);
    });
}

[Atinux]

@dohomi

It seams that VueMaterial use window (which does not exist) directly when requiring it. The best way is to import it inside the if condition:

import Vue from 'vue'

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

[dohomi]

@Atinux I tried your code but without window.onNuxtReady it was failing. Now it works so far quite well. Thanks for your reply

[joshua1]

if window.onNuxtready is a compulsory requirement then it should be in the documentation cos i have thesame issue, for some reasons, client side only plugins never get bound to the global Vue instance

[u12206050]

@dohomi what do you mean by

I solved it inside of my *.vue file:

where is this file?

[dohomi]

To be honest, it doesn't really work that well after NUXT and vue-material update. The developer experience is currently not very good, I usually have to restart the server and after code refresh its very buggy.

[jevojipi]

@dohomi can you kindly suggest any UI library that worked well with Nuxt, from your experience? I am having troubles with most of them.

[Atinux]

• bootstrap-vue
• element-ui
• vuetify

[dohomi]

@jevojipi use vuetify if you are into material design. bootstrap-vue is bootstrap and element-ui has a bootstrap look and feel as well

[sbefort]

When I import individual Vue Material components, webpack includes the whole VueMaterial library in my bundle. Anyone know why?

import Vue from 'vue';

if (process.BROWSER_BUILD) {
    const MdCore = require('vue-material').MdCore;
    const MdSidenav = require('vue-material').MdSidenav;
    Vue.use(MdCore);
    Vue.use(MdSidenav);
}

[vaso2]

There is nuxt-vue-material plugin for easy integration, with SSR. For now, there is no support for lazy loading separate components.

[lmj0011]

see PR for vue-material integration example: https://github.com/nuxt/nuxt.js/pull/2303

basically add vue-material as a plugin and make sure SSR is false
ref: https://nuxtjs.org/guide/plugins#client-side-only

sidenote, if you're planning to integrate vue-material into an existing project expect some conflicting CSS rules

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.