How can I use it with Vue/Nuxt.js ?

[AndrewBogdanovTSS]

I'm trying to integrate css-element-queries into my Nuxt.js app, but once I connect all of the libs, I see that styles are applied for a split second and than Vue takes over the DOM and repaints everything to the original state. In console I'm getting couple errors saying: vendor.js:10916 [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.

[marcj]

The client-side rendered virtual DOM tree is not matching server-rendered content

Makes sense, because CSSEQ inject sensor elements (div) into the target element - only at the frontend. If you have on server-side a mirror DOM then this will break. I don't know Nuxt.js, but your only bet is to disable that check, as CSSEQ doesn't work without injected sensor elements.

[y-nk]

@marcj i'm also interested in Vue.js support. Would you allow/be interested that I write it, based on your solution ?

[lukeramsden]

Seems like this exists https://github.com/thebrubaker/vue-element-queries

[David-Desmaisons]

Check Vue.resize

[JacopoKenzo]

Seems like this exists https://github.com/thebrubaker/vue-element-queries

Did you manage to get that working? Vue.js needs this amazing library!

[stefandesu]

I made this work natively with Vue.js by installing it with npm and start listening in App.vue:

npm install css-element-queries

const ElementQueries = require("css-element-queries/src/ElementQueries")
ElementQueries.listen()

After that, you can just use it in CSS like described. Of course, this will only give you the functionality in CSS, there won't be a @resize event or anything.

I'm not sure if it's necessary to make that call in App.vue, but I tried it first in main.js and it didn't work.

[robertfausk]

@stefandesu Can you tell us where you started it? In mounted?

[stefandesu]

@robertfausk Just at the beginning of the <script> tag: https://github.com/gbv/cocoda/blob/9047db5bd2c4d157b22b9015c3b455fdb8d5a84b/src/App.vue#L218-L220

[sebenik]

I'm using the following mixin to make this work with Vue.js. Just include the mixin in every component you are using css element queries.

<script>
var ElementQueries = require('css-element-queries/src/ElementQueries');

export default {
  created() {
    ElementQueries.init();
  },
  mounted() {
    let parentNode = this.$el ? this.$el.parentNode : this.parentNode;
    return ElementQueries.findElementQueriesElements(parentNode);
  },
};
</script>