Compatibility

[ghost]

Is this component compatible with browserify, laravel-elixir and vueify?

I'm trying to use it but i'm unable to import without errors...

[BosNaufal]

Hey @ricardovigatti, Thanks for using vue-scrollbar. And for your problem, would you like to show me what the error is? So, I can identify what's happen with vue-scrollbar~ :grin:

[ghost]

Of course... i've installed normally using npm

npm install vue-scrollbar

I wanna use it within a modal component that i have running already, so what i need is import and call the "components" property. (the modal component name is ModalForm and it's a single file component.

// ModalForm.vue
<template>
    <div class="modal">
        // modal top, irrelevant code

        // vue-scrollbar
        <div class="modal-body">
            <vue-scrollbar classes="my-scrollbar">
                {{{ content }}}
            </vue-scrollbar>
        </div>

        // modal bottom, irrelevant code
    </div>
</template>

<script type="text/babel">
    import vueScrollbar from 'vue-scrollbar';

    export default {
        components: { vueScrollbar },

        // others irrelevant code...
    }
</script>

I think it's all fine with the code. I think it is the browserify or vueify who is messing up the build. This is my gulpfile with laravel-elixir:

// ...requires

gulp.task('default', function(cb) {
    return gulp.src('./bower.json').pipe(install()).on('end', function() {
        elixir(function(mix) {

            // main.js adds Vue to 'body', ModalForm component is inside it
            // this code is working fine, error happens only when i try to use vue-scrollbar
            mix.browserify('main.js', 'ANY_OUTPUT_FOLDER', 'assets/js');

// ...

I got the following error when trying to build:

Browserify Failed!: Parsing file C:\desenvphp\processoseletivo\node_modules\vue-scrollbar\src\js\components\vue-scrollbar.vue: Unexpected token (2:0)

Ok, that's it... I think the problem isn't with vue-scrollbar itself, cause it appear with other components too, anyway, Vue-Spinner have a section explaining how to use it with my setup.

I try to use those instructions with vue-scrollbar and have no luck. Changing the import statement to import { vueScrollbar } from 'vue-scrollbar/build/build.js' makes the build pass, but a got this error at firebug console:

Unknown custom element: <modal-form> ...

This is complicated to explain, i know, even more to reproduce the error on your enviroment, so i have one question: What is different on vue-spinner component that makes it work with browserify and vueify that vue-tollbar hasn't ?

Thanks in advance.

[BosNaufal]

Importing the build.js is a wrong way to do it. According to your link, It seems vue-scrollbar need "individual built" version which is will only bring the vue-scrollbar itself without my main.js. While the build.js is bringing all my component for the example page. :grin:

[BosNaufal]

https://github.com/BosNaufal/vue2-scrollbar