Whats the difference between this and using a plugin?

[msacchetti]

this works fine for me? what does this module do differently?

/plugins/quasar.js

import Vue from 'vue'
import 'quasar/dist/quasar.css'
import 'quasar-extras/material-icons/material-icons.css'
import Quasar, {
  QLayout,
  QInput,
  QBtn,
} from 'quasar'
Vue.use(Quasar, {
  config: {},
  directives: {
    // ...
  },
  plugins: {
    // ...
  },
  components: [
    QLayout,
    QInput,
    QBtn,
  ]
})

nuxt.config

  plugins: [
    '~/plugins/quasar.js'
  ],

[BenceSzalai]

Should be pretty similar.

The key difference I see is that nuxt-quasar uses stylus and stylus-loader to load the styles, therefore:

• it allows for easier / more flexible override the default styling of Quasar. You can for example override the default styl variables using a file /assets/quasar.variables.styl, which you cannot with import 'quasar/dist/quasar.css'.

Another important one (should be*) that since it is an npm package it can automatically "include" the required Quasar packages, whereas with your plugin you also need to manually add them to packages.json or do some npm install

(*: in fact unfortunately it lists stylus and stylus-loader as dev dependencies, but this means when using nuxt-quasar you still have to install these yourself / so that is kind of a missed opportunity for benefit)

Some other less important differences I can see:

• nuxt-quasar allows to define the Quasar configuration in nuxt.config.js, while your example has the configuration in the plugin, separated from the rest of your nuxt.config.js
• nuxt-quasar by default includes Quasar @quasar/extras/animate (which may be a good or bad thing)
• nuxt-quasar can include quasar/dist/quasar.ie.polyfills.js which is not part of your plugin
• nuxt-quasar can include any icon sets from quasar, e.g. quasar/icon-set/material-icons.js based on configuration

After all nuxt-quasar is a convenience solution over writing your own nuxt plugin. There is no magic happening, even though it is doing quite a lot to make sure all files are found and included at the correct place for the build process.

[itaysmalia]

config: {}, directives: { // ... }, plugins: { // ... }, components: [ QLayout, QInput, QBtn, ]

I am getting an error Error in data(): "TypeError: Cannot read property 'screen' of undefined"

found in

---> <Layouts/default.vue> at layouts/default.vue

Have you seen it before?

[BenceSzalai]

@itaysmalia: It is not related to quasar or nuxt-quasar!

This would probably be more appropriate as a question on stackoverflow.com or similar site, also include your <script> from default.vue, because that's more than likely the source of the issue.

Probably you have a reference in your data() section of your Vue component to a screen variable, which is not valid in the given context.

[jdpmoore]

What version of Nuxt and Quasar was this built for?

I get a similar error to @itaysmalia above, only cannot read property Platform of 'undefined'. After some investigation I found that the undefined in question was $q, so it is related to nuxt-quasar or quasar... it doesn't appear to be available early enough for the Quasar components being used. Given $q.screen is also a quasar property, I am fairly sure it's the same error.

[msacchetti]

What version of Nuxt and Quasar was this built for?

I get a similar error to @itaysmalia above, only cannot read property Platform of 'undefined'. After some investigation I found that the undefined in question was $q, so it is related to nuxt-quasar or quasar... it doesn't appear to be available early enough for the Quasar components being used. Given $q.screen is also a quasar property, I am fairly sure it's the same error.

What version of Vue and Nuxt are you using with what version of the plugin? My project I was referencing in my initial post I ended up going the custom plugin route* over this module. I'd suggest to just make your own plugin with the Quasar library. The benefits of this module are much appreciated but not worth struggling too much over. Then again if the issues with the Quasar version itself that won't do much good.

[jdpmoore]

Nuxt v2.14.1, Vue v2.6.11, Quasar v1.15.11, nuxt-quasar v0.1.3. I had also tried the custom plugin route outlined above and had the same issue, unfortunately. That's why I wondered if it was a change in one of the versions that had caused the conflict. I'm happy to role back to an earlier version for the time being if it gets it working! What versions did you use in your project? Thanks so so much for the quick reply.

[msacchetti]

Nuxt v2.14.1, Vue v2.6.11, Quasar v1.15.11, nuxt-quasar v0.1.3. I had also tried the custom plugin route outlined above and had the same issue, unfortunately. That's why I wondered if it was a change in one of the versions that had caused the conflict. I'm happy to role back to an earlier version for the time being if it gets it working! What versions did you use in your project? Thanks so so much for the quick reply.

No problem! Not sure if this will be much help but the project i have it working on is running: Quasar 1.9.4 Nuxt 2.10.2 Vue 2.6.11