wotamann / vuetify-form-base

Schema-based Form Generator - Vue.js 2.0 Component based on Vuetify 2.0
https://wotamann.github.io/vuetify
232 stars 64 forks source link

v-form-base not rendered in production mode #116

Open xavi-99 opened 2 years ago

xavi-99 commented 2 years ago

Hi

Everything is working perfectly on dev environment, but on generating the build for production environment component is not rendered.

There are no errors or messages in console.

I've tried with

ssr: true, generate: { fallback: true, }, target: 'static',

My plan is to deploy it with Netlify or Vercel but without the rendering working and no errors, I'm not sure how to proceed.

This is my component

<template>
  <div>
    <v-app id="inspire">
      <v-main>
        <v-form-base :model="formValues" :schema="formSchema"></v-form-base>
      </v-main>
    </v-app>
  </div>
</template>

<script>
import VFormBase from 'vuetify-form-base'

export default {
  components: { VFormBase },
  data() {
    return {
      formValues: {
        name: 'Marc',
        password: '123456',
        email: 'Marc@gmail.com',
        checkbox: true,
        select: 'Marc',
      },
      formSchema: {
        name: { type: 'text', label: 'Name', col: 12 },
        surname: { type: 'text', label: 'Surname', col: 12 },
        password: { type: 'password', label: 'Password', col: 12 },
        email: { type: 'email', label: 'Email', col: 12 },
        checkbox: { type: 'checkbox', label: 'Checkbox', col: 12 },
        select: {
          type: 'select',
          label: 'Select',
          items: ['Marc', 'Xavi', 'Carles'],
          col: 12,
        },
      },
    }
  },
}
</script>
mortezaa commented 2 years ago

same issue here! I'm using nuxtjs with ssr false and try solutions in this threat : https://stackoverflow.com/questions/67958105/vuetify-form-base-form-not-load-in-production-mode but not fixed!
console has no warning any idea what to do??

mortezaa commented 2 years ago

I fixed the problem after it take me plenty of time here is the solution : 1- install v-mask package 2- just copy https://github.com/wotamann/vuetify-form-base/blob/master/dist/src/vFormBase.vue to your components folder 3- use Vue.component('VueMask', () => import('v-mask')) in your plugins 4- then just remove form base import in pages.