How to integrate Javascript library in Laravel9 with Vue using Laravel Mix

Question

new to all these modern day frameworks I'm trying to get this javascript library to work in my Vue component: https://clipboardjs.com

I can see it is integrated into my public/js/app.js file when Mix runs - but I cannot seem to be able to reference it from within my .vue (component) file

Can anyone give me a step by step guide on how to get this to integrate into my project please:

resources/js/app.js file

 import './clipboard';

the clipboard.js file is located at:

resources/js/clipboard.js

Mix webpack.mix.js file:

mix.js("resources/js/app.js", "public/js")
 .js("resources/js/clipboard.js", "public/js")
 .vue()
 .postCss("resources/css/app.css", "public/css", [
   require("tailwindcss"),
 ]);

My Vue component (method section):

<script>
    export default {
        props: ['mediaDetails'],
        data() {
            return {
            }
        },
        methods: {
              copyPassword() {
            alert("copy");
            var password = document.getElementById('#password');
            alert('1');
             var clipboard = new ClipboardJS(password);
            alert('2');
          }
        }

the alert('2') never fires due to the clipboard assignemnet failing

You don't seems to import that npm package anywhere ?

Lk77
– Lk77

2022-06-28 08:20:26 +00:00
Commented Jun 28, 2022 at 8:20 — Lk77
– Lk77, Commented Jun 28, 2022 at 8:20

DVN-Anakin · Accepted Answer · 2022-06-28 08:56:29Z

1

First, in your webpack.mix.js file, remove the line .js("resources/js/clipboard.js", "public/js")
Install the clipboard package: npm install clipboard
In your Vue component, import the package in order to use it:

<script>
   import ClipboardJS from 'clipboard';

   export default {
       props: ['mediaDetails'],
       data() {
           return {
           }
       },
       methods: {
             copyPassword() {
           alert("copy");
           var password = document.getElementById('#password');
           alert('1');
            var clipboard = new ClipboardJS(password);
           alert('2');
         }
       }

BTW You have a typo error in document.getElementById('#password'), it should be document.getElementById('password')

edited Jun 28, 2022 at 8:56

answered Jun 28, 2022 at 8:37

DVN-Anakin

1,7971 gold badge11 silver badges14 bronze badges

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

1 Comment

user1079925 Over a year ago

Thanks @DVN-Anakin. I will give this a go and report back. Thanks for your help.

Collectives™ on Stack Overflow

How to integrate Javascript library in Laravel9 with Vue using Laravel Mix

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related