nuxt.js integration

[lukas-pierce]

require(...) is not defined

[lifenautjoe]

I'm also wondering how to integrate Nuxt.

[lifenautjoe]

@flatanimals 🙏

[lifenautjoe]

Tried this

import Vue from 'vue';
const vmq = require('vue-media-queries');

const mediaQueries = new vmq.MediaQueries({
    bands: vmq.CommonBands.Bulma
});

Vue.use(mediaQueries);

export default function (ctx: any, inject: any) {

    console.log(ctx);

    const bulmaBands = vmq.CommonBands.Bulma;

    const mediaQueries = new vmq.MediaQueries({
        bands: bulmaBands
    });

    if (ctx.app.mixins) {
        ctx.app.mixins.push(bulmaBands);
    } else {
        ctx.app.mixins = [bulmaBands]
    }

    ctx.app.mediaQueries = mediaQueries;
}

Didn't work. Looks like we'll be rolling our own library that works with Nuxt.

Not sure why is it required to pass items to the Vue() constructor, instead of working just with the .use

[nintra]

figured out a working nuxt integration:

import Vue from 'vue'
import { MediaQueries, CommonBands } from 'vue-media-queries'

const mediaQueries = new MediaQueries({
    bands: CommonBands.Bulma,
})

Vue.use(mediaQueries)

Vue.use({
    install(vue) {
        vue.mixin(CommonBands.Bulma.mixin)
    },
})

export default function (ctx, inject) {
    ctx.app.mediaQueries = mediaQueries
}

The difference is, that you created a new instance mediaQueries and did not use the same you used as a plugin before.