How to use external js file in vue

Question

I would like to know how to use a jQuery library inside a vue file in Laravel 5.4

I want to use this library in my vue file: input mask

In my vue file I am creating a table and each row has a form with a date field with class 'date'.

With jQuery I will mask these fields with: $('.date').mask('00/00/0000');

How can I import the library to vue and mask all these date fields?

The js file is in: public/js/jquery.mask.min.js

I tried:

var mask_script = require('/js/jquery.mask.min.js');

and:

var mask_script = require('js/jquery.mask.min.js');

And then:

export default {

        mounted: function () {
            this.loadData();
            $('.date').mask('00/00/0000');

But I get this error on npm run dev:

Can't resolve js/jquery.mask.min.js

Can someone please help?

whoacowboy · Accepted Answer · 2017-04-13 10:06:46Z

1

You have to load the file from the actual path.

Try

// make sure the path is the actual path of jquery.mask.min.js
var mask_script = require('../../../public/js/jquery.mask.min.js');

I would then move jquery.mask.min.js to your resources/assets/js/ folder somewhere because you are compiling it into you app.js file.

edited Apr 13, 2017 at 10:06

answered Apr 12, 2017 at 17:39

whoacowboy

7,5077 gold badges48 silver badges84 bronze badges

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

8 Comments

Sigal Zahavi Over a year ago

By the way, I'm new to Laravel, and I don't think I compile it into app.js. I don't have it in the webpack.mix.js and not in app.js. Do I need to add it somewhere for it to be compiled? I don't fully understand this yet.

whoacowboy Over a year ago

Can you post you directory structure as it relates to the javascript files.

Sigal Zahavi Over a year ago

mysite/public/js/jquery.mask.min.js Vue component: mysite/resources/assets/components

whoacowboy Over a year ago

Try changing the path to var mask_script = require('../../../public/js/jquery.mask.min.js');

Sigal Zahavi Over a year ago

Thx, didn't help either.

|

Afraz Ahmad · Accepted Answer · 2018-09-06 07:10:17Z

I was trying to use this bootstrap template in vue. It requires holder libaray to show thumbnail icons. so I have created a folder in resources/js/scripts where I saved holder.min.js and then I called in vue page like this.

Folder structure of laravel 5.7

     resources
          \js
           |components
           |views (I have created this folder to save vue pages)
                 \inventory(folder)
                                 \Index.vue
           |scripts
                   \holder.min.js

In Index.vue View located at resources/js/inventory/Index

<script> require('../../scripts/holder.min.js')</script>

first ../ will take it to views directory from inventory
second ../ will take it to main js directory where scripts folder is located

and it worked without any issue.

Collectives™ on Stack Overflow

How to use external js file in vue

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related