Recently, I've been experimenting with integrating the Pickr JS library (specifically from this link: [) into my NuxtJS project.
To install it, I simply use NPM:
npm install @simonwep/pickr
In one of my NuxtJS pages - the create.vue page to be exact - here's what I did:
<template>
<div>
..other HTML elements..
<span class="color-picker"></span>
..other HTML elements..
</div>
</template>
<script>
import '@simonwep/pickr/dist/themes/classic.min.css';
import Pickr from '@simonwep/pickr'
export default {
mounted() {
// code below is taken from Github
const pickr = Pickr.create({
el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano'
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)'
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
}
}
</script>
However, upon navigating to the page where I imported the plugin, an error occurs:
https://i.sstatic.net/031aa.png
One thing that crosses my mind...
I suspect the error happens because it's trying to locate the
<span class="color-picker></span>A Case of Vanilla JS Library Integration
Is there a standard way to incorporate a vanilla JS library as a plugin? I referred to the guide at https://nuxtjs.org/guide/plugins/ but couldn't quite grasp if my scenario fits in. Clearly, this isn't a Vue plugin but rather an ES6 one nested inside node_modules. So, how do we approach this to ensure access across all pages?
Odd Behavior Post-Server Restart
Peculiar observation - when I restart the server (CMD+C, npm run dev [both server and client compile successfully]), and proceed to visit http://localhost:3000/dashboard/ageRanges/create, the library functions flawlessly.
https://i.sstatic.net/vNXxf.png
Strangely, upon reloading the same page, the earlier error resurfaces.
https://i.sstatic.net/XhcBL.png
Any insights on why this might happen?