Develop Reference

for making boostrap cdn work, do I need also the javascript cdn or only css, or all 3?

which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js

TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown

If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.

Disabled jquery on a div to fix conflicting issues with Vue.js

I'm working on a Drupal project that imports JQuery on all its pages. We started to use Vue.js by injecting it directly in the HTML pages for the development of dynamic components (not for a SPA).
The problem is that we have JQuery UI that conflicts with Vue.js. It will directly modify all the inputs of Vue.js by readapting their styles.
Is it possible to disable JQuery UI on a particular div, which would contain Vue.js? Without having to disable it on the whole page, because our header has a burger menu that uses JQuery UI.

We found a fix to correct this conflict between Vue.js and JQuery. This method will not completely disable JQuery on a given scope, but will disable a behavior that we were having trouble with.
$('select').selectmenu("destroy")
More about the method destroy here:
https://api.jqueryui.com/selectmenu/#method-destroy

How to use bootstrap 4 in vue.js 2 without bootstrap-vue?

I'm wodering how can I integrate bootstrap 4 into my vue.js 2.6.
I know there are tons of tutorials out there but all of them either are obsolete in late 2020, or require useing bootstrap-vue which brings a host of junk tags into the table which I abhore.
So I appreciate if you could provide a paractical full example of such integration with vanilla bootstrap 4.

You can use vanilla bootstrap in a vue project. Just install bootstrap by running
npm i bootstrap popper.js jquery
Popper.js and jquery are dependencies of bootstrap.
In your main.js file, you import bootstrap by adding:
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"

Per official Bootstrap doc, the following components require JQuery, bootstrap.js and Popper.js:
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper)
Scrollspy for scroll behavior and navigation updates

Angular-boostrap popover requires Tooltip Module?

"Like the Bootstrap jQuery plugin, the popover requires the tooltip module."
Is this why I can't get my popover to work? What is the tooltip module, do I need to import something else? I imported bootstrap, angular-bootstrap, angular, and angular-animate. I still can't get something as simple as this to work:
<button uib-popover="test" popover-placement="top" popover-trigger="mouseenter">test</button>
The plunker example never imports a tooltip module?
https://angular-ui.github.io/bootstrap/#/popover

It's a part of Bootstrap JS framework. You can enable it by in including either tooltip.js or bootstrap.js files on your page.
https://getbootstrap.com/javascript/#tooltips
As for your issue, it's probably caused by some version conflict between the frameworks -- I had similar problem as yours and managed to get it working by updating the frameworks (AngularJS, bootstrap, ui-bootstrap) to their latest versions.
Also, the popovers don't work on disabled elements (using ng-disabled) (see https://github.com/angular-ui/bootstrap/issues/1025 )

Check for existance of loaded JavaScript libraries for my app's use otherwise load my own versions?

I am building a Project Management application as a SugarCRM Plugin.
In my app, which uses a lot of JavaScript, exscecially for a part that shows a Project Task record in a popup Modal Div.
So on the page there is HTML for 1 Modal Div. I then update the Task record fields inside of that 1 modal every time a new task record is clicked on. It brings the Task Modal into view and updates all the task fields and re-initiates all the JavaScript code that works on those fields.
For example almost all the data fields for a Task record that are shown in the modal div have Edit-in-place capability using the jQuery library called X-Editable. There is also a scrollbar plugin for custom scrolling inside of the Modal, Datepicker library, and some more little plugins here and there. As well as all my custom code, hundreds o lines for this section alone!
Now that I explained the app a little bit, I can move on to the questions...
SugarCRM v6.x.x uses jQueryUI DatePicker plugin for it's own Date Selectors.
SugarCRM v7.x.x changes and uses Bootstrap DatePicker library (this one http://www.eyecon.ro/bootstrap-datepicker/)
So in my plugin app I have considered both of these for my Date field needs since they are already loaded into the page anyways!
Once issue I have is the SugarCRM v6 vs v7 using different libraries.
But that isn't a real big issues as I am able to build 2 versions and target the code to the correct version for the user.
My question is, knowing that these libraries get loaded into the page, is there a reliable way for my app to check for there existence and use them if they exist? And then if they do not, load my own versions?
Or am I better off loading my own version, even though it could be loaded into the page already?

You can use duck typing to check what script is loaded. For the bootstrap version, you can check if the $.fn.datepicker.Constructor method exists; it's exclusive to that script. The jqueryui version has the same property but in lowercase.
Edit cause I didn't notice the last part of the question. If none of the scripts have loaded, you can load your own the same way the HTML5 Boilerplate does (assuming we are still working on the datepicker):
<script>window.MyLibrary || document.write('<script src="//routeToMyScript.js"><\/script>')</script>
<script>$().datepicker || document.write('<script src="//routeToMyScript.js"><\/script>')</script>