4

I was trying to make a radio button using VueJS and Bootstrap Vue, but this happens when I make it. I'm expecting this to be syntax error just like what it said, but I can't seem find any clue.

So I tried to copy pasted the code, here's the full code of test_radio.php

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>

<body>
<template>
  <div>
    <b-form-group label="Radios using <code>options</code>">
      <b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
      </b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components">
      <b-form-radio-group id="radios2" v-model="selected" name="radioSubComponent">
        <b-form-radio value="first">Toggle this custom radio</b-form-radio>
        <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
        <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
        <b-form-radio :value="{fourth: 4}">This is the 4th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">
      Selected: <strong>{{ selected }}</strong>
    </div>
  </div>
</template>

    <!-- Vue.js @2.5.1 -->
    <script type="text/javascript" src="js/vue.js"></script>

    <!-- Add this after vue.js -->
    <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<!-- The error is below -->
<script>
export default {
  data () {
    return {
      selected: 'first',
      options: [
        { text: 'Toggle this custom radio', value: 'first' },
        { text: 'Or toggle this other custom radio', value: 'second' },
        { text: 'This one is Disabled', value: 'third', disabled: true },
        { text: 'This is the 4th radio', value: {fourth: 4} }
      ]
    }
  }
}
</script>
</body>
</html>

Uncaught SyntaxError: Unexpected token export

I'm pretty sure there's a mistake on the code on Export, but I already checked many times and I can't seem to find the error in the syntax.

I'm still new to Javascript, Vue.JS, and Bootstrap Vue, so any help would be useful, thanks! Anyway this code comes from Bootstrap Vue's documentation.

Irfandy Jip
  • 1,308
  • 1
  • 18
  • 36
  • 2
    `import` and `export` don't have browser support yet, you can only use them with a preprocessor like webpack ([see here](https://bootstrap-vue.js.org/docs/)). The bootstrap documentation is creating a Vue component, that code isn't meant to be used right inside `index.html`. –  Oct 09 '18 at 07:35
  • Ahh.. so I have to use Webpack..? Are there any alternate to this? I tried figuring out how to use Webpack from their documentation, but it's confusing.. Any reference to Webpack for newbies would be nice if there's no alternate.. – Irfandy Jip Oct 09 '18 at 07:41
  • 1
    It's a whole can of worms. Start here: https://cli.vuejs.org/guide/ –  Oct 09 '18 at 07:43
  • Hm... thanks.. I try to read Vue CLI, I tried to avoid it at first because it seems to be avoidable using the CDN, but I guess not. I'll try to understand it then. Thanks. – Irfandy Jip Oct 09 '18 at 08:00
  • Oh and you might want to make your comment an answer, cause I'm going to open another new question if I needed to. Thanks again! – Irfandy Jip Oct 09 '18 at 08:01
  • To be clear: you don't *have* to do all that. But you cannot use `export` or `import` in that case: https://jsfiddle.net/khrismuc/bpr7qLyj/ (and in the long run, if your approach is to rather avoid complicated things, make sure you do enough research before posting questions here) –  Oct 09 '18 at 08:16
  • `import` and `export` are natively supported in recent browser versions, right? I'm currently using them in Chrome so I assume they are. So is there a compatible way to use Vue? – Tom Russell Feb 22 '19 at 06:45
  • @TomRussel yup, they are now (but not all browsers, *please refer to google for this*). I don't even remember asking this (now I already learned Vue CLI 3), if you're not using Webpack but wanted to use Vue using ES6 Syntax add `type="module"` on your ` – Irfandy Jip Feb 22 '19 at 16:42
  • **Lucky you!** I haven't able to find this when I was in trouble, but here's an example of someone already using it. https://medium.com/js-dojo/vue-js-single-file-javascript-components-in-the-browser-c03a0a1f13b8 – Irfandy Jip Feb 22 '19 at 16:48
  • @IrfandyJip: The example does show a component getting imported into a Vue instance module, which is somewhat helpful. I'm just thinking there should be a way to import Vue directly into the module that defines the top-level Vue instance, rather than using a script tag in index.html which seems ugly and somewhat indeterminate in load/execution. E.g. - does the script tag go in the head? The body? Where in the body? – Tom Russell Feb 22 '19 at 19:47

1 Answers1

5

If you are going to use the CDN approach, VueJS starts out like

<!-- Begin of area that is impacted by VueJS -->
<div id="app">
   <b-form-group label="Radios using <code>options</code>">
     <b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
     </b-form-radio-group>
   </b-form-group>
</div>
<!-- End of area that is impacted by VueJS -->


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

The '#app' is what ties the sections together, not import/export

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
  • So, there's still no way to use export along with script src approach? – fathergorry May 30 '21 at 12:40
  • Hi @fathergorry, at the time I was newbie to Frontend Dev, apparently there is a way using [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). But I'm not sure about the project setup, since I already used the `webpack` approach (using the Vue CLI 3). – Irfandy Jip May 31 '21 at 03:58