How to use the clipboard/dist/clipboard function in clipboard

// Throw error message as Exception, so I can catch Vue compilation errors
console.error = function (msg) {throw msg}

// Vue.config.devtools = true
// Vue.config.debug = true

import './app'
import './style.css'

import Clipboard from 'clipboard/dist/clipboard'
new Clipboard('.copy')

export default ({ match: { params }, intl, dispatch }) => {
  if (params.playlistId) {
    dispatch(soundActions.playlist(params.playlistId)); // Load new playlist
  }

  const clipBoardClass = `copy-clipboard-${shortid.generate()}`;
  if (params.shareId) {
    const clipboard = new Clipboard(`.${clipBoardClass}`);
    clipboard.on('success', () =>
      dispatch(notifyActions.send('Playlist link copied!'))
    );
  }

  const resetSounds = () => {
    dispatch(soundActions.reset(false));
    dispatch(push('/'));
  };

  const handleDesktopPlaylistInput = e => {
    if (e.keyCode === 13) {
      handleStopPropagation(e);
      dispatch(push(`/playlist/${e.target.value}`));
    }
  };

let copyToClipboardBtn = document.createElement('button');

    copyToClipboardBtn.innerHTML = clipboardIcon;
    copyToClipboardBtn.id = `clipButton-${key}`;

    ['lg:block', 'hidden'].forEach((value) => {
        copyToClipboardBtn.classList.add(value);
    });

    copyToClipboardBtn.setAttribute('aria-label', 'Copy to Clipboard');
    copyToClipboardBtn.setAttribute('title', 'Copy to Clipboard');
    copyToClipboardBtn.classList.add('copyBtn');

    element.appendChild(copyToClipboardBtn);

    let copyToClipboard = new ClipboardJS(`#${copyToClipboardBtn.id}`);

    copyToClipboard.on('success', (element) => {
        copyToClipboardBtn.innerHTML = clipboardCopiedIcon;
        element.clearSelection();
        setTimeout(() => {
            copyToClipboardBtn.innerHTML = clipboardIcon;
        }, 1500);
    });

    // Code Element.
    let codeElement = element.querySelector('code');
    codeElement.id = `clipText-${key}`;
    copyToClipboardBtn.dataset.clipboardTarget = `#${codeElement.id}`;
});

e.preventDefault();
        let target = $(e.currentTarget);
        target.parents('.expandable').toggleClass('expanded');
        target.blur();
    });

    // syntax highlight
    hljs.registerLanguage('xml', xml);
    hljs.registerLanguage('php', php);
    hljs.registerLanguage('json', json);
    $('.code-box-content.xml, .code-box-content.php, .code-box-content.json').each(function (i, block) {
        hljs.highlightBlock(block)
    });

    // clipboard
    let clipboard = new ClipboardJS('.copy');
    clipboard.on('success', function (e) {
        setTimeout(function () {
            e.clearSelection();
        }, 150);
    });
});

let initClipboardElements = function () {
        const clipboard = new Clipboard(".copy-clipboard");
        ;

        clipboard.on('success', function (e) {
            showToast('Copied to clipboard!', '#28a745');
            e.clearSelection();
        });

        clipboard.on('error', function (e) {
            console.error(e);
            showToast('Error while copying to clipboard: ' + e.toString(), '#dc3545');
            e.clearSelection();
        });
    }