Can't make vue-slick-carousel work from CDN

user_627344 0
Viewed 2259

I'm trying to use it in a very small app using the CDN script:

https://unpkg.com/vue-slick-carousel

with no success.

I'm new to vue.js and I'n not sure if I have to import it or anything. The documentation says I have to import it: Vue-slick-carousel

IT should be like this but I can't make it work:

  import VueSlickCarousel from 'vue-slick-carousel'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'MyComponent',
    components: { VueSlickCarousel },
  }

The test is in this codepen

Am I missing something?

vue.js javascript
1 Answers

You can't 'import' from a CDN script in the way you've done. You can access the window variable and assign it to the component. By using a CDN, it becomes bound to the window.

So components: { VueSlickCarousel : window['vue-slick-carousel'] } without the import VueSlickCarousel from 'vue-slick-carousel' would solve that portion of your question.

The issue is that, the code referenced in the example is for packaged installs, and not a CDN. If you can install via npm install vue-slick-carousel, or yarn add vue-slick-carousel, then these problems would resolve themselves.

Edit: As mentioned in the comments, the component should be kebab-case in your HTML. <vue-slick-carousel> ... </vue-slick-carousel> instead of <VueSlickCarousel> ... </VueSlickCarousel>

This is in line with the style guide provided in the Vue docs seen here

In most projects, component names should always be PascalCase in single-file components and string templates - but kebab-case in DOM templates.

user_63967610
Related