Topic: Vue Nuxt Color Picker Plugin Installation

qantra-io free asked 4 years 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 ?


qantra-io free answered 4 years 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



              
                
              
            



Magdalena Dembna staff answered 4 years 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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: mac book
  • Browser: chrome
  • OS: mac
  • Provided sample code: No
  • Provided link: No