Generating valid nuxt-quasar-plugin fails

[smajl]

When? When you try to omit some parts of config or all of it. This will be the result in .nuxt/nuxt-quasar-plugin.js:

Vue.use(Quasar, {
  config: ,
  components: {
,
  },
  directives: {
,
  },
  plugins: {
,
  },
  iconSet,
});

As you can see, config is missing value and there are commas inside components, directives and plugins which is not valid syntax.

BTW, thanks for useful Nuxt plugin.

[NickHurst]

@smajl Yeah, that's a case that I hadn't prepared for since all the apps I'm currently using it in have the more-or-less the same config which has all those properties defined. Fortunately, this should be a relatively easy fix, just need to add some checks that the properties exist and are populated before inserting them into the template. I'll try to get this fixed later today/tomorrow and pushed out.

Thanks for reporting the issue, and please report any other bugs you may encounter. Glad someone else found the plugin useful!

Also apologies for taking a couple days to see this, as I apparently didn't have it setup to send me notifications for new issues on my repos.

[NickHurst]

Just published version 0.1.2 which should fix this, let me know if you're still experiencing this issue after upgrading!

[smajl]

@NickHurst ❗️ 0.1.2 completely breaks nuxt-quasar module for me. Quasar styles are completely gone and the whole app behaves very weird. This is part of the nuxt.config.ts which works for me with 0.1.0:

...
  quasar: {
    extras: ['mdi-v3'],
    framework: {
      config: {
        brand: {},
      },
      components: [
        'QAvatar',
        'QBtn',
        'QBtnDropdown',
        'QCard',
        'QCardActions',
        'QCardSection',
        'QDrawer',
        'QExpansionItem',
        'QForm',
        'QHeader',
        'QIcon',
        'QInput',
        'QItem',
        'QItemLabel',
        'QItemSection',
        'QLayout',
        'QList',
        'QMenu',
        'QPage',
        'QPageContainer',
        'QScrollArea',
        'QSeparator',
        'QSpace',
        'QToolbar',
        'QToolbarTitle',
        'QTooltip',
      ],
      directives: ['ClosePopup'],
      plugins: ['Dialog'],
      iconSet: 'mdi-v3',
      cssAddon: false,
    },
    supportIE: false,
  },
...

Let me know I you need any debugging help, will stay on 0.1.0 until 0.1.3. :)

[NickHurst]

@smajl So, it builds successfully, but when you open the app it's just the styles are gone/messed up? Seems like my other quick fix that would fix a build error if assets/quasar.variables.styl was missing is causing the issue.

Do you have a assets/quasar.variables.styl file? It shouldn't matter whether or not you do, but that'll help me figure how to fix it.

And if you get the chance, could you bump it back up to 0.1.3 and before starting add these entries to the css property of your nuxt.config.js:

//...
css: [
  // any other files you may have
  'quasar/dist/quasar.styl',
  'quasar/src/css/variables.styl',
  '~/assets/quasar.variables.styl',
]
//...

Actually typing this out, I think I realized what's causing the issue, is the ~/ prefixed to the variables override file, as I'm just using fs.existsSync(file) to check for the file and I just realized that because of the Nuxt root alias also being the same as the user home alias, fs.existsSync is looking for that file in your home directory rather than the project root directory, which would cause it to not get added -- as well as the two that are getting pulled from the quasar package itself would need to get prefixed with node_modules/ for fs.existSync to return true as well, so they aren't getting added either. I won't be able to confirm and push a fix until a little later today, so if you get the chance before I do to confirm that, it'd be appreciated, but I'm 99% sure that's what the issue is, and fortunately it's an easy fix.

[smajl]

@NickHurst 1) Yes, app builds, but styles are gone and Quasar goes crazy on some pages (but I attribute that to missing styles). 2) Yes, I do have assets/quasar.variables.styl file. 3) Yes, adding those quasar's .styl files to config manually fixed the main issue, so seems like you are on the right path: files lookup is broken.

Note: Icons are gone as well, but I guess that will be auto-fixed along with styles.

[NickHurst]

@smajl I believe I've got this fixed and just published 0.1.3, swapping out fs.existSync with the path resolver Nuxt passes in:

const resolvePath = path =>
    resolver.resolveModule(path) || resolver.resolveAlias(path)

So that node_modules paths and paths nuxt alias paths are now correctly being resolved and will actually be found & added. I was able to actually test it in one of my real apps, rather than the quick test nuxt app I generated to test the previous fix, and everything looked normal and the dev tools showed that all the quasar style files were there. Hopefully everything will be working for you after you update.

I'll be back to working on some of the nuxt apps next week (been on other projects the past few weeks), so I'll finally get around to adding some actual unit tests and then release the 1.0 version (and get rid of the warning in the README) now that I've had some confirmation that it works for someone that isn't me (assuming the update works for you). But, let me know if you encounter any more bugs/oddities, or open up an issue if you find there's some functionality that quasar-cli/vue-cli provides that you'd like to see. I'll be working on getting quasar's app extensions working next, so that should be ready in the next two weeks I'd imagine, in case you're interested in using those.

Thanks for finding the bugs!

[smajl]

@NickHurst 0.1.3 fixed the issue, all is fine now, thanks. And app extensions support would be great 👍