How do imports work?

Hello

I am having troubles importing the Vue and libraries. I cannot find an example that covers all the parts I need, only snippets that don’t seem to fit together. Previously I managed to use vue by itself, but never tried with libraries.

At the moment I would like to get a form using Vue Formulate and a schema, but the imports are not working.

Here is the code (all a single .html file for experiments):

<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>

<script>

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

Vue.use(VueFormulate);

</script>

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

<script>

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>

this causes the following error:

TypeError: o is undefined
formulate.umd.min.js:5:61290
SyntaxError: import declarations may only appear at top level of a module test.html:7
SyntaxError: export declarations may only appear at top level of a module test.html:23
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. test.html

I you don’t know the solution to this problem could you please point me in the right direction.

import is es6 syntax,but browsers and node not support this syntax,so you need tools such as webpack,vite,babel-node to compile this syntax

You don’t need to use import Vue from 'vue'; since <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> creates the global Vue variable for you. It could be something similar with import VueFormulate from '@braid/vue-formulate';, but <script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.umd.min.js"></script> is too hard for me to read to be sure, but you should be able to read in the docs how to use it.

The latest versions have started to support it, but I think that’s irrelevant in this case.