Vue.js export default not working

Question

I'm following the form example and it doesn't work :: https://bootstrap-vue.js.org/docs/components/form

This is my code, inside my simple basic index.html :

<head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
      <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

      <script src="https://unpkg.com/vue"></script>
      <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
      <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


  </head>

  <body>
  <template>
    <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group id="exampleInputGroup1"
                    label="Email address:"
                    label-for="exampleInput1"
                    description="We'll never share your email with anyone else.">
        <b-form-input id="exampleInput1"
                      type="email"
                      v-model="form.email"
                      required
                      placeholder="Enter email">
        </b-form-input>
      </b-form-group>
      <b-form-group id="exampleInputGroup2"
                    label="Your Name:"
                    label-for="exampleInput2">
        <b-form-input id="exampleInput2"
                      type="text"
                      v-model="form.name"
                      required
                      placeholder="Enter name">
        </b-form-input>
      </b-form-group>
      <b-form-group id="exampleInputGroup3"
                    label="Food:"
                    label-for="exampleInput3">
        <b-form-select id="exampleInput3"
                      :options="foods"
                      required
                      v-model="form.food">
        </b-form-select>
      </b-form-group>
      <b-form-group id="exampleGroup4">
        <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
          <b-form-checkbox value="me">Check me out</b-form-checkbox>
          <b-form-checkbox value="that">Check that out</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>
      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    </div>
  </template>
  </body>

and the js code +1

<script>
export default {
  data () {
    return {
      form: {
        email: '',
        name: '',
        food: null,
        checked: []
      },
      foods: [
        { text: 'Select One', value: null },
        'Carrots', 'Beans', 'Tomatoes', 'Corn'
      ],
      show: true
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
    },
    onReset (evt) {
      evt.preventDefault();
      /* Reset our form values */
      this.form.email = '';
      this.form.name = '';
      this.form.food = null;
      this.form.checked = [];
      /* Trick to reset/clear native browser form validation state */
      this.show = false;
      this.$nextTick(() => { this.show = true });
    }
  }
}
</script>

It is stricly the same than on the vue bootstrap website and it doesnt work

There is a blank screen, and This is the firefox error :

SyntaxError: export declarations may only appear at top level of a module

I can't show my form, there is nothing, just a blank screen, it doesn't work !

Note : i dont wanna to use babel or whatever complex stuff, i simply need my index.html to work

Please help me thank you

The export keyword only works in ES6 module environments, these can either be created using babel or when you use type="module" in the Chromium browser (not many browsers support these environments) — Ferrybig
– Ferrybig, Commented Apr 17, 2018 at 16:30

tony19 · Accepted Answer · 2022-07-15 22:43:11Z

1

The example you copied verbatim is the contents of a Vue Single File Component. Those need either Webpack or Browserify to be translated to actual JavaScript that the browser can understand.

You can re-write the code avoiding the SFC structure, using Vue.component() and pass the template in the template property, if you want to obtain a reusable Vue component, but it will be a bit more complex.

Otherwise, if it is only a single page, simply use new Vue() and bind to an element selection using the el property (see Declarative Rendering in the guide):

var app = new Vue({
  el: '#app',
  data: {
    ...
  }
})

and inside your html:

<div id="app">
  ...
  ... vue perform rendering and interpolation here ...
  ...
</div>

edited Jul 15, 2022 at 22:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 17, 2018 at 16:31

Marco Pantaleoni

2,53916 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jojo Bebert Over a year ago

Thank you a lot ! Should be specified on the bootstrap vue website, which is super by the way ! Thank for your help .

tony19 · Accepted Answer · 2022-07-16 03:23:42Z

You are confusing Single-File Components with using Vue in simple HTML files.

To get the latter you could do as shown below.

Basically you have to:

Remove the <template> tag and add an id to its inner div, such as: <div id="app">
Wrap the object that was being exported in a Vue constructor and add an el option to it:
```
  <script>
      new Vue({
          el: '#app',
          data() {
```

JSBin demo here.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>

<body>
<div id="app">
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
        <b-form-group id="exampleInputGroup1"
                      label="Email address:"
                      label-for="exampleInput1"
                      description="We'll never share your email with anyone else.">
            <b-form-input id="exampleInput1"
                          type="email"
                          v-model="form.email"
                          required
                          placeholder="Enter email">
            </b-form-input>
        </b-form-group>
        <b-form-group id="exampleInputGroup2"
                      label="Your Name:"
                      label-for="exampleInput2">
            <b-form-input id="exampleInput2"
                          type="text"
                          v-model="form.name"
                          required
                          placeholder="Enter name">
            </b-form-input>
        </b-form-group>
        <b-form-group id="exampleInputGroup3"
                      label="Food:"
                      label-for="exampleInput3">
            <b-form-select id="exampleInput3"
                           :options="foods"
                           required
                           v-model="form.food">
            </b-form-select>
        </b-form-group>
        <b-form-group id="exampleGroup4">
            <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
                <b-form-checkbox value="me">Check me out</b-form-checkbox>
                <b-form-checkbox value="that">Check that out</b-form-checkbox>
            </b-form-checkbox-group>
        </b-form-group>
        <b-button type="submit" variant="primary">Submit</b-button>
        <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    email: '',
                    name: '',
                    food: null,
                    checked: []
                },
                foods: [
                    {text: 'Select One', value: null},
                    'Carrots', 'Beans', 'Tomatoes', 'Corn'
                ],
                show: true
            }
        },
        methods: {
            onSubmit(evt) {
                evt.preventDefault();
                alert(JSON.stringify(this.form));
            },
            onReset(evt) {
                evt.preventDefault();
                /* Reset our form values */
                this.form.email = '';
                this.form.name = '';
                this.form.food = null;
                this.form.checked = [];
                /* Trick to reset/clear native browser form validation state */
                this.show = false;
                this.$nextTick(() => {
                    this.show = true
                });
            }
        }
    });
</script>
</body>
</html>

The above uses your code directly in the Vue instance.

If you want to use your form as a component, such as:

<div id="app">
  <my-form></my-form>
</div>

Follow this JSBin demo.

THank you a lot, so i have to try that ! Yes i understand what you mean, thanks a lot, should be specified on the bootstrap vue website ... I never have understood components, in angularjs either, too difficult for me !

Collectives™ on Stack Overflow

Vue.js export default not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related