0

I have a file for a component which needs slider in it. This is how i have the slick initialized.

import Slick from 'vue-slick'

components: { Slick },
data() {
  return {
    slickOptions: {
      //options can be used from the plugin documentation
      slidesToShow: 4,
      infinite: true,
      accessibility: true,
      adaptiveHeight: false,
      arrows: true,
      dots: true,
      draggable: true,
      edgeFriction: 0.30,
      swipe: true
    }
  }
},
// All slick methods can be used too, example here
methods: {
  next() {
    this.$refs.slick.next()
  },
  prev() {
    this.$refs.slick.prev()
  },
  reInit() {
    // Helpful if you have to deal with v-for to update dynamic lists
    this.$refs.slick.reSlick()
  }
}

But i get multiple errors.

1 - error Parsing error: Unexpected token.

2 - Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: Unexpected token (122:21).

Can someone guide me how to use slick in vuejs? I have used slick previously in jquery.

webpack.config.js code

  module.exports = function (config, { isClient, isDev }) {
    module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file-loader'
      }
    ]
  }
  build: {
    extend (config, { isServer }) {
      if (isServer) {
        config.externals = [
          require('webpack-node-externals')({
            whitelist: [/^vue-slick/]
          })
        ]
      }
    }
  }
  return config
}
Raj
  • 395
  • 1
  • 4
  • 15
  • did you forget to add `export {`? in the component file below `import Slick from 'vue-slick'`, you need to wrap your component in `export { components: {...} , methods: {...} }` – Andy Oct 16 '18 at 08:24
  • @Andy I changed my code to this --> components: { Slick } and the errors are gone. Now i have another error in my webpack config file. I have edited my question and added the code – Raj Oct 18 '18 at 07:37

0 Answers0