Changing CSS style

[piko92]

Hello,
I'm going to use your awesome tool for making forms in Vue.js and Nuxt.js but I've got 2 problems with it, the first one is CSS customization and the second issue is using of this tool actually is almost impossible because this thing seems is not adoptable with Nuxt.js. I'd really appreciate it if you help me, thanks.

[chenquincy]

@piko92 Thanks for your appreciation. To resolve the first problem, you can refer to element's doc. You can change the css styles of this component by change element's theme. To the second problem, I never used Nuxt.js, so I should take some time to have a try. I will reply you later(maybe more than two days because I'm a bit busy this time)

[chenquincy]

@piko92 Sorry for the late reply. To the second problem, I successfully used this component in nuxt after resolving one problem only. Maybe your problem is: document is not defined ? Here is the solution:

1. add plugin

// ~/plugins/dynamic-form.js
import Vue from 'vue'
import DynamicForm from 'vue-dynamic-form-component'
Vue.use(DynamicForm)

2. edit nuxt.config.js

plugins: [
  '@/plugins/dynamic-form' // add plugin path here
],
build: {
  transpile: [
    /^vue-dynamic-form-component/ // add transpile
  ]
}

3. usage

<template>
  <div class="container">
    <dynamic-form v-model="data" :descriptors="descriptors" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {},
      descriptors: {
        string: { type: 'string', required: true }
      }
    }
  }
}
</script>

You can reopen the issue if it didn't solve your problem.