Skip to main content

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:

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

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

export default {
plugins: [
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 => {
.tap(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:


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


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