Vue Nuxt Color Picker Plugin Installation


Topic: Vue Nuxt Color Picker Plugin Installation

qantra-io pro premium asked 2 months ago

expected mdb vue color picker plugin to work normally, but it is showing me a window not found error. i have tried to included in plugins as a ssr: false and i didn't work too.

i there any guide on how to use the vue plugin in nuxt ?


Magdalena Dembna staff premium answered 2 months ago

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>

qantra-io pro premium answered 2 months ago

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



              
                
              
            



Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Vue
  • MDB Version: 6.7.1
  • Device: mac book
  • Browser: chrome
  • OS: mac
  • Provided sample code: No
  • Provided link: No