jquery in ./~/vue-blu/dist/vue-blu.min.js

xxRockOnxx commented 7 years ago

vue-blu.min.js is looking for jquery when I try to run npm run dev

Do I need jQuery or am I missing something?

I use Laravel mix. I'm not sure if this is Vue-blu issue or Laravel issue.

chenz24 commented 7 years ago

Vue-blu don't need jquery. What's the version of Laravel?

xxRockOnxx commented 7 years ago

Laravel 5.4. Tried removing all I imported to debug if there's something that needs jQuery but it seems it really is vue-blu that is looking for it.

chenz24 commented 7 years ago

I will have a try myself.

xxRockOnxx commented 7 years ago

@chenz24 i think i can confirm it's vue-blu because I tried Element http://element.eleme.io and it is working fine.

chenz24 commented 7 years ago

Hi, I've tried it myself. It worked fine. below is my code

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import VueBlu from 'vue-blu'
import 'vue-blu/dist/css/vue-blu.min.css'

Vue.use(VueBlu)

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

welcome.blade.php

<body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @if (Auth::check())
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ url('/login') }}">Login</a>
                        <a href="{{ url('/register') }}">Register</a>
                    @endif
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
                <div id="app">
                    <tag type="primary">Tag Primary</tag>
                </div>
            </div>
        </div>
        <script src="/js/app.js"></script>
    </body>

xxRockOnxx commented 7 years ago

Here's my code. All are commented except the import of Vue and VueBlu

import Vue from 'vue'
import VueBlu from 'vue-blu'
import 'vue-blu/dist/css/vue-blu.min.css'
Vue.use(VueBlu)
//import axios from 'axios'
//import App from './App.vue'
//import router from './router'
//import ElementUI from 'element-ui'
//import locale from 'element-ui/lib/locale/lang/en'
//Vue.use(ElementUI, { locale })

//axios.defaults.headers.common = {
//  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
//  'X-Requested-With': 'XMLHttpRequest'
//}
//Vue.prototype.$http = axios

//const app = new Vue({
//  router,
//  el: '#app',
//  render: h => h(App)
//})

I am getting an error even with those lines only.

This is the error:

me@linux-xovy:~/poop/vetline> npm run dev

> @ dev /home/me/poop/vetline
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
 10% building modules 2/5 modules 3 active ...ode_modules/style-loader/addStyles.js(node:13377) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
 95% emitting                                                                           

 ERROR  Failed to compile with 1 errors                                                                                                    8:07:09 AM

This dependency was not found:

* jquery in ./~/vue-blu/dist/vue-blu.min.js

To install it, you can run: npm install --save jquery

I use Laravel 4's default webpack settings. It only looks like this: mix.js('resources/assets/js/admin/app.js', 'public/js/admin')

xxRockOnxx commented 7 years ago

Also, by default Laravel's package.json has jquery. Did you installed that also? Cause I removed it from my package.json

chenz24 commented 7 years ago

The problem do exist. In vue-blu.js, the word of jquery shows in these code.

    if (typeof jQuery !== "undefined") {
        jQuery.fn.flatpickr = function (config) {
            return _flatpickr(this, config);
        };
    }

this._reference = reference.jquery ? reference[0] : reference;

popper.appendChild(config.content.jquery ? config.content[0] : config.content);

All these are if statement, so I am confused about this problem, I will look into it. thx

xxRockOnxx commented 7 years ago

Should I install jquery temporarily or can I just comment that out while waiting for your fix? I actually saw those lines yesterday when I searched on your repo btw.

EDIT I'll install jquery.

chenz24 commented 7 years ago

I think you can install jquery temporarily.

michellaurent commented 7 years ago

I have the same issue.

chenz24 / vue-blu

jquery in ./~/vue-blu/dist/vue-blu.min.js #43