Importing Vanilla js file to Vue.js component

Question

I have previously made some drag and drop functionality in vanilla JS which I have used in other projects. Now I have started a Vue.js project and I would like to use the same drag and drop functionality.

Is it possible to include a vanilla JS file in a Vue.js component? And how can it be done?

So far I have only tried to add a <script> tag in the head element in the index.html but it throws an error.

<script src="../src/js/drag-and-drop.js"></script>

Just a "Uncaught SyntaxError: Unexpected token <" But that shows up no matter if the file is empty or not, I dont think that there is an issue with the file, just that it is imported or included in a wrong way. — Mikkel Fennefoss
– Mikkel Fennefoss, Commented Dec 19, 2018 at 9:50

Julxzs · Accepted Answer · 2018-12-19 14:36:03Z

9

You can import the script within your vue component with either

import

import '../src/js/drag-and-drop.js';
require

require('../src/js/drag-and-drop.js');

in the script section of your component.

e.g.

<template>
  <!-- vue component markup -->
</template>

<script> 
import drag from '../src/js/drag-and-drop';
export default {
  name: 'you-vue-component',
}    
</script>

edited Dec 19, 2018 at 14:36

answered Dec 19, 2018 at 10:23

Julxzs

7371 gold badge7 silver badges21 bronze badges

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

2 Comments

Jayesh Dhandha Over a year ago

Yes true! A good example is given stackoverflow.com/questions/43682446/…

ndotie Over a year ago

let me try this on my codebase

Collectives™ on Stack Overflow

Importing Vanilla js file to Vue.js component

1 Answer 1

import

require

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

import

require

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related