Include Form Renderer in your Vue application

Once Form Renderer is installed there is a couple of things you need to. Depending on how you installed your Vue application you need to do the following: Follow this link for more details about correct configuration based on your install: https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue

VITE: Add vue option in vite.config.js file

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    })
  ]
}

VUE: Add vue option in vue.config.js file

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: tag => tag.startsWith('ion-')
        }
      }))
  }
}

Add script and stylesheet

Add a reference to the form-renderer.js script and form renderer styles sheet in index.html. Good practice is to copy & paste the 'form-renderer.js' files from '/node_modules' directory to Vue 'public' directory:

Script:

    // exact path to 'form-renderer.js' script
    <script src="path/form-renderer.js"></script>

Stylesheet:

    // form renderer stylesheet's path
    <link rel="stylesheet" href="path/styles.css">