Nuxt compatibility

[hmaesta]

Is vue-formulate-extended compatible with Nuxt SSR?

I am receiving Unexpected identifier just by placing VueFormulateExtended on VueFormulate plugins.

Codesandbox:
→ https://codesandbox.io/s/nuxt-vue-formulate-vue-formulate-extended-imask-89092

node_modules/vue-formulate-extended/lib/vue-formulate-extended.umd.js:1:173
node_modules/vue-formulate-extended/lib/vue-formulate-extended.umd.js:1:543

[gahabeen]

Hey @hmaesta, sorry for the delay. Been off-grid last week!
I'll have a look.

[gahabeen]

I won't be able to tell as I haven't used it with Nuxt.
Maybe a mismatch in the peer dependencies as Vue is defined this way?

[CavalcanteLeo]

I'm facing it now, any thought?

using

const VueFormulateExtended = require('vue-formulate-extended')
//or
import VueFormulateExtended from 'vue-formulate-extended'

returns this error:
Cannot use import statement outside a module

and I had to install imask separately
packages.json:

{
    "@braid/vue-formulate": "^2.5.2",
    "vue-formulate-extended": "^1.1.1",
    "imask": "^6.0.7",
}

full js plugin:

import { pt } from '@braid/vue-formulate-i18n'
import '../node_modules/@braid/vue-formulate/themes/snow/snow.scss'
const VueFormulateExtended = require('vue-formulate-extended')
// import VueFormulateExtended from 'vue-formulate-extended'

export default {
  plugins: [
    pt,
    VueFormulateExtended({
      features: {
        formEvents: true, // by-default
        textMask: false, // by-default
        enforceNumber: false, // by-default
      },
    }),
  ],
  locale: 'pt',
  classes: {
    outer(context) {
      switch (context.classification) {
        case 'button':
          return 'flex w-full justify-end'
        default:
          return 'mb-4 w-full'
      }
    },
    input(context) {
      switch (context.classification) {
        case 'button':
          return ' px-4 py-2 rounded bg-green-500 text-white hover:bg-green-600'
        default:
          return 'w-full px-3 py-2 rounded-lg border-2 border-gray-200 outline-none focus:border-primary-500'
      }
    },
    label: 'font-medium text-sm',
    help: 'text-xs mb-1 text-gray-600',
    error: 'text-red-700 text-xs mb-1 border-red-500',
  },
}

and nuxt.config.js

buildModules: [
    '@braid/vue-formulate/nuxt',
],

[CavalcanteLeo]

I also tried without buildModules, and installed as nuxt plugin, but got another error:

TypeError: o.shallowEqualObjects is not a function

[minasvisual]

I also tried without buildModules, and installed as nuxt plugin, but got another error:

TypeError: o.shallowEqualObjects is not a function

VueFormulate version 2.5 not support VFE current version yet. try downgrade VueFormulate. We are waiting admin accept the pull request with fixes.

[dzcpy]

Any updates?