vue-blu
vue-blu copied to clipboard
chenz24
jquery in ./~/vue-blu/dist/vue-blu.min.js
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.
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 i think i can confirm it's vue-blu because I tried Element http://element.eleme.io and it is working fine.
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>
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')
Also, by default Laravel's package.json has jquery. Did you installed that also? Cause I removed it from my package.json
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
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.
