Importing problems about vue-color HOT 11 OPEN

Will use babel-preset-env in the next release, and provide ESM ready component in 3.0, which we are working on it.

from vue-color.

I'm having the same problem... @paglias have you solved this?

from vue-color.

Are you sure that it's loading the entire library using
import { Compact as ColorPicker } from 'vue-color'; ?

We are exporting each component individually, importing like that should import only the component, not the whole library.

from vue-color.

@2one2 I think I ended up importing the whole project because importing a single file doesn't work and import { Compact as ColorPicker } from 'vue-color'; imports the entire project anyway because it's compiled as an es5 module and not exported using es6

from vue-color.

@paglias thanks

@cassioscabral yes importing with import { Compact as ColorPicker } from 'vue-color'; imports entire library... with webpack

from vue-color.

@paglias Can I ask did you install stylus-loader in your project? Need more information to debug.

from vue-color.

@linx4200 no, I don't use stylus-loader

from vue-color.

@paglias Thanks for the reply. Would fix this problem asap.

from vue-color.

Fixed.
Please upgrade to the latest version.
Now you can import component individually. For example import compact from 'vue-color/src/components/Compact.vue';.

from vue-color.

Similar issue here but with babel-preset-es2015.

For the record, install it in your project (npm install babel-preset-es2015) and change vue-loader options in Webpack:

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    // your options here,
    presets : [
      require.resolve('babel-preset-es2015')
    ]
  }
}

In addition, since there is a mixin/color.js file (non vue file) which also needs transpilation:

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
    presets : [
      require.resolve('babel-preset-es2015')
    ]
  }
}

@linx4200 Perhaps this could be fixed in a new version? Providing an ESM ready folder would be ideal but might be a bit hard. I think using babel-preset-env, which is more common than babel-preset-es2015, is easier. Also, color.js would need to be full ES5. I think the only required change in that regard is syntax like this:

{
  data() {
  }
}

Should be:

{
  data: function() {
  }
}

Same for computed props, watch and methods.

from vue-color.

@frandiox mixin/color.js is compiled by babel before release, so I think it is ES5 ready.

from vue-color.