We Keep Coding

cdn jquery in vue is not defined

I have a page design (HTML template, CSS, and some jquery on ti) which is pretty legacy and the current task is to make it work with Vue as a first step (we have a plan to override it fully later). Also, it uses Jquery MDB (I know there is a VUE MDB but we plan the move from MDB and it makes no sense to buy the license), so what I want to achieve is to include jquery and MDB to index.html (not like npm dependencies as I just have a local MDB file) and also to have a access to jquery from inside the VUE.
So currently in index.html, I'm including dependencies like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/mdb/mdb.min.css">
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
but when I'm trying to use jquery in VUE for example like this $('.datepicker').pickadate({... I'm getting the error ‘$’ is not defined
What should I do to make external jquery work in/with VUE?
UPDATED
What I did, now I have iin the index.html like this:
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
and as an addition, I also install npm jquery package and including it to the file which needs it like this: import $ from 'jquery' . Now I'm getting different error, B(...)(...).pickadate is not a function and I'm not user what is this B(...)(...) as in code I have $('.datepicker').pickadate({...
Probably it's some conflict as now I have 2 jquery in the page...

Sails autodelete a resouce I added in layout

I'm using Select2 in a sails project (https://select2.org/getting-started/installation). For that I added the following lines in my layout.ejs
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
But when I run the application with the command sails lift the two lines are automatically deleted from the layout.ejs.
I know it's not the editor (I'm using vscode) because I test that looking for the problem. Do you know what I can do to solve that?

Sails uses Grunt to generate files and automatically add resources into layout.
Scripts are inserted between <!--SCRIPTS--> and <!--SCRIPTS END-->
Styles are inserted between <!--STYLES--> and <!--STYLES END-->
So if you add resources manually between these tags, they will be deleted by Grunt.
See https://sailsjs.com/documentation/anatomy/tasks/config/sails-linker.js for more informations

Adding script in Laravel

I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.

You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation

Bootstrap 4: Uncaught ReferenceError: Popper is not defined

I've installed Bootstrap 4 using Node and Gulp and when running the application I get the following error
Uncaught ReferenceError: Popper is not defined
I've only been using the Bootstrap grid system so far and I haven't used anything that would require the Bootstrap JS. Looks to me like Bootstrap is missing something or I haven't installed it correctly (to be honest it's probably me) - has anyone else come across the same issue or know a fix at all?

Since our Bootstrap beta 2 release, we added two new dist files : bootstrap.bundle.js and bootstrap.bundle.min.js which contain Popper.js inside
Plus use this link to find the latest release of Popper.js : https://cdnjs.com/libraries/popper.js because the above linked release (1.8.2) is very old, latest is 1.12.9
BTW you should choose the UMD release of Popper.js because it's the one used by Bootstrap

Use bootstrap.bundle.js that already has popper.js NPM path 'bootstrap/dist/js/bootstrap.bundle.js'.

For those struggling with this issue on Webpack: In your entry file,
import 'bootstrap' does give the error. You need to remove that and replace it with import 'bootstrap/dist/js/bootstrap.bundle.js'
This is sufficient and you don't need to import Popper separately. That applies for bootstrap 4.0.0.beta2

In my case it turned out that the popper.js script should be called before bootstrap.js.
<script src="https://../popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://../bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

I had the same issue and have been playing around with it for half a day over a simple carousel. Safari on Mac didn't give feedback properly in that there is a priority on libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
Reviewing the error I ran across "You need JQ before BS for this to work", so I tried it, also putting Popper before BS.
So I have all of these in my <head> and boom it worked.

1-Copy code on this page: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
2-Past on new file and save on this name (popper.min.js)
3-Add script on html before bootstrap script:
<script src="popper.min.js"></script>
<script src="bootstrap.js"></script>

I had the same. I'm on Rails and i followed bootstrap 4 gem installation from https://github.com/twbs/bootstrap-rubygem. I just make popper requirement in application.js first, like this :
//= require popper
//= require jquery3
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap

For those who are here and trying to add popper v2 to Laravel
in package.json at devDependencies section we have
"popper.js": "^1.12",
so remove this string. As official doc says they move to #popperjs scope name. If you have any v1 poppers used in project follow the migrate guide v1 to v2 from doc. UPD: this sht is required by bootstrap. so, i had to reinstall it after remove. skip this step.
in console npm i #popperjs/core
in bootstrap.js at try section add
window.Popper = require('#popperjs/core')
rebuild your js in console npm run dev
ok, now you can make your instance
let _instance = Popper.createPopper(element, tooltip, {})

django css: general query on CDNs and crispy forms

I have set up a page and have implemented bootstrap using the CDN code that is recommended to access the online bootstrap server:
for the CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
Javascript:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
However eventually my site will have to go live and I'm not certain that this code will suffice when that happens and I feel I should download the actual bootstrap code.
Furthermore if I download the bootstrap code properly and put it in a hypothetical media folder called "css2" such that it won't interfere with my own custom css files, where do I then put crispy_forms.
As of now I am holding them in the downloaded crispy forms files within "media"- on the same level as "myproject" but the "{ load crispy_forms}" tag doesn't look in the media folder because the "CRISPY_TEMPLATE_PACK = 'bootstrap3'" does not specify a path to look for the crispy forms content... the crispy forms website tells to look up the django documentation for how to organise my media folder but searching the website under "cripy forms" returns nothing.....
Finally, I have added crispy forms to my installed apps:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myproject.myapp'
'crispy_forms', ###Registered
)
However when i migrate and run the server I get an error:
ImportError: No module named myappcrispy_forms
so I rearranged the order of the modules and then got this error:
ImportError: No module named crispy_forms
Should i download bootstrap properly or do the CDNs suffice?
Where do I store the bootstrap code and how will it affect my own CSS code?
How do register the module crispy_forms? and where do I store the crispy forms folder there is little documentation on this?
Thanks

Using CDN has it's pros and cons: it allows you to cache bootstrap files, so that your site pages should be downloaded faster from the second time. On the other hand, you do not usually need to use all the bootstrap css functionality, but only a tiny bit of it. In that case local and "self-cleaned" bootstrap files are prefered. Project collectors like Gulp can really help you with the "cleaning" of bootstrap css.
I usually store bootstrap files in /static/css/bootstrap.min.css
and /static/js/bootstrap.js - in the same folder with other css and js files. In order to give your own css more priority just link it in html file after bootstrap files.
Well, personally I think crispy_forms have quite clear documentation. To start using it you should only: install it, add app to Installed apps in settings.py and point to the css framework you want to use by setting a template pack variable. From docs you can see that crispy no longer upload it's own bootstrap files. It will use yours instead.