1

I am using vue js 2.3.o version. I want to use plugin for handling modal windows e.g. vue-js-modal (https://github.com/euvl/vue-js-modal).

I add library to my page when I want to use it.

<script type="text/javascript" src="/lib/vuejs/index.js"></script>

I put in a place before I am creating vue instance itself:

import VModal from 'vue-js-modal';
Vue.use(VModal);

var myVue = new Vue({

Then I see:

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

What I don't understand what is it about. What is wrong ? How should be this plugin correctly use ?

Thank you

Pierce O'Neill
  • 385
  • 9
  • 22
squirrelInTheBarel
  • 127
  • 15

1 Answers1

2

It seems like you're importing the library using script tags. According to vue-js-modal's instructions, you have to use npm install vue-js-modal --save to install and then use import VModal from 'vue-js-modal' to import.

If you're using script tags to import the module, you'll have to write:

<script src="vue-js-modal.js" type="module"></script>

on your HTML page. However, for now, if you want to import modules in your browser, you'll have to do some extra steps to enable this feature. (You can follow the instructions here: link).

What I suggest is check out the demos vue-js-modal made: link, which use Babel and Webpack instead of only importing script tags. Or, when you set up your Vue web app, use their cli tool (link) to set up a starter project and then install vue-js-modal instead.

kevguy
  • 4,328
  • 1
  • 24
  • 45
  • 1. problem, we need to enable some flag in browser. So this cannot be used in some comercial web. How this will work for big amount of customers? I will put some message on main page, please enable this and this flag in your browser to make our page works for you ? – squirrelInTheBarel Oct 09 '17 at 12:01
  • 2. problem. After enabling this flag, error message disappear. But I have another one. I am getting "TypeError: Error resolving module specifier: vue-modal-js". My import statement is "import VModal from 'vue-modal-js';" and I am referencing to "" where index.js is file which I downloaded from https://github.com/euvl/vue-js-modal. I am really javascript beginner, so maybe I am missing some basic ideas of this concept. Thank you – squirrelInTheBarel Oct 09 '17 at 12:01
  • Okay, I think what `vue-js-modal.js` has is a ES6 module, current browsers don't support yet unless you do the hacks, so currently what ppl do is using Webpack to handle it. Like I said, check out the demos `vue-js-modal` provide: https://github.com/euvl/vue-js-modal/tree/master/demo, you can see what their `index.html` use is a `build.js` file bundled by webpack. Try running the examples first, let me know if you encounter any problems. – kevguy Oct 09 '17 at 13:51