CODEWITHSUNDEEP
vuejs2
squirrelInTheBarel
squirrelInTheBarel

Reputation: 154

How can use plugin in Vue.js 2.x?

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

Upvotes: 1

Views: 876

Answers (1)

kevguy
kevguy

Reputation: 4438

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.

Upvotes: 2

Related Questions