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, Dec 19 '18 at 09:50
Check this [answer](https://stackoverflow.com/a/50159338/3200799) — Core972, Dec 19 '18 at 10:23

Julxzs · Accepted Answer · 2018-12-19T14:36:03.577

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 '18 at 14:36

answered Dec 19 '18 at 10:23

Julxzs

737
1
7
21

Yes true! A good example is given https://stackoverflow.com/questions/43682446/how-to-add-vanilla-js-to-a-custom-vue-component – Jayesh Dhandha Dec 19 '18 at 10:27
let me try this on my codebase – ndotie Jul 06 '23 at 08:00

Importing Vanilla js file to Vue.js component

1 Answers1

import

require