Search code examples
vuejs3quasar-framework

Using Vueform in Quasar

I am trying to setup Vueform in Quasar. So i started a new Quasar project from the Quasar CLI, and i created a new bootfile from the CLI, where i imported and set up the Vueform.

import { boot } from "quasar/wrappers";
import Vueform from "@vueform/vueform";
import vueformConfig from "../vueform.config";

export default boot(({ app }) => {
  console.log(Vueform, vueformConfig);
  app.use(Vueform, vueformConfig);
});

But i am getting errors which seem to be related to the @vueform/toggle component that is installed by the Vueform package.

SyntaxError: The requested module '/node_modules/wnumb/wNumb.js?v=a6e88e7a' does not provide an export named 'default' (at useTooltip.js:2:8)

When i start a new project without Quasar, and install Vueform as described on their website then everything works fine. So my guess is that it is related to the Quasar CLI. Has anyone got Vueform working in Quasar? Or maybe someone else encountered a similar problem and solved it?

Any help is appreciated, if i cant get it to work with Quasar i will need to find an alternative, but i was hoping i could use Vueform without the Vueform components.

Solution

  • Okay so after alot of trying, i tried various way's to install the plugin without any luck. So i tried to just use the content of the plugin instead of installing the plugin.

    My quasar config looks like this:

    vitePlugins: [
  ... other plugins
  // This is the plugin for VueForm, i tried to install it as a vite plugin
  // but it didn't work, so i had to add it here as a plugin.
  {
    name: 'vueform',
    async config() {
      return {
        optimizeDeps: {
          include: [
            'wnumb',
            'nouislider',
            'trix',
            'lodash',
            'axios',
          ],
        },
        server: {
          watch: {
            ignored: [`!**/node_modules/@vueform/**`],
          },
        },
      };
    },
  },
],

    And this does seem to do it, its working now without any errors. I will also notify the developers of Vueform so maybe they can add support in the future, but for anyone else encountering the same problem - this one did the trick for me.

    I continued the discussion on Vueform's github https://github.com/vueform/vueform/discussions/120