Vue Nuxt Color Picker Plugin Installation

Although we are trying to improve our compatibility with SSR, some of our components/plugins are still meant to use on client-side. There is a walkaround by using the client-only component as a wrapper (https://nuxtjs.org/api/components-client-only/) - after importing a CSS file with styling, the basic example seems to work fine:

        <client-only>
          <mdb-color-picker :show="showPicker1" @getValue="color1 = $event" @close="showPicker1 = false">
              <div class="mdb-cp-btn-wrapper">
                <div class="mdb-cp-btn" :style="{background: color1}" @click="showPicker1 = !showPicker1"></div>
              </div>
            </mdb-color-picker>
          </client-only>

Here is how i got it work.

1. first included the mdb-color-picker.6.0.0.tgz in the root directory of the project

   1. add the path of the .tgz in package.json

      "dependencies": { "mdb-color-picker": "./mdb-color-picker-6.0.0.tgz", }

2. npm install

3. find the main.css the downloaded MDB-Vue-Color-Picker folder and copy the css

4. add the css to your nuxt project wherever you going to use it.

5. change the path of the svg file in the css to the assets of your project for example from img//background.3c60f5b8.svg to ~@/assets/images/background.3c60f5b8.svg

6. import the package to your component and wrap it in tag