Using Vue Formulate with a schema

Question

I try to get Vue Formulate running, but it just does not work. Here is my code:

this version includes the import statements: https://vueformulate.com/guide/installation/#direct-download

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.umd.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>

<template>
  <FormulateForm
    v-model="values"
    :schema="schema"
  />
</template>

<script>

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

Vue.use(VueFormulate)

export default {
  data () {
    return {
      values: {},
      schema: [
        {
          type: 'password',
          name: 'password',
          label: 'Enter a new password',
          validation: 'required'
        },
        {
          type: 'password',
          name: 'password_confirm',
          label: 'Confirm your password',
          validation: '^required|confirm:password',
          validationName: 'Password confirmation'
        },
        {
          type: 'submit',
          label: 'Change password'
        }
      ]
    }
  }
}
</script>

Opening the site results in the following error appearing in the console:

formulate.umd.min.js:5 Uncaught TypeError: Cannot read property 'en' of undefined
    at new Jt (formulate.umd.min.js:5)
    at formulate.umd.min.js:5
    at formulate.umd.min.js:5
    at formulate.umd.min.js:5
Jt @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
(anonymous) @ formulate.umd.min.js:5
test.html:15 Uncaught SyntaxError: Unexpected token 'export'

Thanks!

Did you import and installed Vue-Formulate with the import statement? — nunop, Jun 27 '20 at 09:57
i tried that, but assumed this is only needed for a package manager based workflow. maybe i put the import statements into the wrong positions. the post is edited with the import statements included, but the error did not change. — sdafadsf, Jun 27 '20 at 11:16
[This](https://codepen.io/pierrebonbon/pen/gOPxzaQ) worked for me in Codepen. I think the problem may be because your are using FormulateForm instead of FormulateInput. — nunop, Jun 27 '20 at 13:21
it indeed works in a codepen, but not in an html file. there i get the error: SyntaxError: export declarations may only appear at top level of a module. i think the error is in the vue js is imported, but there are no examples about that on the internet because codepen takes care of theat — sdafadsf, Jun 27 '20 at 13:24
just copy and paste your codepen into an html file and open it. it has nothing to do with schemas only with importing the vue and the formulate library. — sdafadsf, Jun 27 '20 at 13:40
Yep, I agree. Btw, it says in the documentation that "objects in a schema are assumed to be FormulateInput components by default" so the use of FormulateForm in a schema is surely not the issue as I suggested above. It must be the vue and vue-formulate library as you say. The curious thing is that [this](https://codepen.io/pierrebonbon/pen/GRovdPb) codepen with schemas doesn't give any issue but doesn't show anything in the result window either. — nunop, Jun 27 '20 at 13:41
the problem with these codepens is that they abstract the importing of the libraries away. therefore the import of the libraries cannot be tested using them. — sdafadsf, Jun 27 '20 at 13:48

score 2 · Answer 1 · edited Jul 15 '22 at 23:31

The issue is due partially to DOM limitations, as explained in the small note in Vue Formulate's documentation on direct downloads. To be more specific, since we are not using a builder but downloading the libraries from a CDN and inserting them with script tags, all components names must be kebab-case. We also need to create a Vue instance.

Vue.use(VueFormulate)

new Vue({
  el: '#app',
  data: function () {
    return {
      values: {}
    }
  }
})

<!DOCTYPE html>
<html>
  
<head>
<meta name="description" content="Vue-Formulate example">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue Formulate</title>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/formulate.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/snow.css">
  
</head>

<body>
  <div id="app">
    <formulate-form v-model="values">
      <formulate-input
        type="password"
        name="password"
        label="Enter a new password">
      </formulate-input>
      <formulate-input
        type="password"
        name="password_confirm"
        label="Confirm your password"
        validation="required|confirm:password"
        validation_name="Password confirmation">
      <formulate-input
        type="submit"
        label="Change password">
      </formulate-form>
    </formulate-form>
    <p><strong>This is your password: {{ values }}</strong></p>      
  </div>
</body>
</html>

The same but with Schemas (please note that Vue-Formulate needs to be version 2.4 or above):

Vue.use(VueFormulate)

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      values: {},
      schema: [
        {
          type: 'password',
          name: 'password',
          label: 'Enter a new password',
          validation: 'required'
        },
        {
          type: 'password',
          name: 'password_confirm',
          label: 'Confirm your password',
          validation: '^required|confirm:password',
          validationName: 'Password confirmation'
        },
        {
          type: 'submit',
          label: 'Change password'
        }
      ]
    }
  }
})

<!DOCTYPE html>
<html>

<head>
<meta name="description" content="Vue-Formulate example">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue Formulate with Schema</title>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.3.8/dist/snow.css">
  
</head>

<body>
  <div id="app">
    <formulate-form v-model="values" :schema="schema"/>
    <p><strong>This is your password: {{ values }}</strong></p>      
  </div>
</body>
</html>

interesting. so it does work. at least somewhat. schemas still don't work most likely due to the limitations you mentioned. i did not know that these problems exist. at least now i know it's not the right tool. thank you very much for the help! — sdafadsf, Jun 27 '20 at 19:17
Schemas do work, only tags needs to be kebab-base. Check my updated answer above. — nunop, Jun 27 '20 at 22:48

Using Vue Formulate with a schema

1 Answers1