Dropdown Bootstrap does not open - vue.js

I'm currently learning Vuejs, bootstrap, bootstrap-vue-3, and Vue Router. But somehow the dropdown does not open.
Here is my code: https://stackblitz.com/edit/vue-66s6dv?
The bootstrap source: https://getbootstrap.com/docs/4.4/components/navbar/

The bootstrap source your are working with (based on your link), is from Bootstrap 4.4 and it's slightly, but different to Bootstrap 5.
A version of Bootstrap 4 is not compatible to Vuejs 3.
So I would recommend to use the latest Bootstrap 4.6 with Vuejs 2 - than you can use BootstrapVue 2.21.2.
Here is a link to show how you am able to run it togehter which the different version:
https://bootstrap-vue.org/docs

Related

Heroicons not appearing in chrome for TailwindUI, but appears broken in Firefox

I bought and installed TailwindUI. I copied and pasted one of the Navigation components just to see how it looks in the app and the hamburger menu and the notification bell (both part of Heroicons) aren't appearing.
When I click on the part where the menu should dropdown it works. But all that's present is a little square that sort of looks like a checkbox.
Here is what it looks like in Firefox (mobile debugger):
Testing on Safari and it looks like Chrome.
In node_modules I can see heroicons are present:
The app uses Elixir/Phoenix, Vue, Webpack, and Tailwindcss.
Anyone know what the issue is or how I'd go about debugging it?
If you are not using SVG syntax, you have to install and import #heroicons/react package into your project using npm/yarn
npm install #heroicons/react
TailwindUI supports Vue 3, which does not appear to include #vue/compat. #vue/compat is a compatibility build for when one wants to migrate from Vue 2 to Vue 3. the compat build (aka, migration build) is supposed to be Vue 3 compatible but I guess it's still not enough for TailwindUI.

which version of vue.js is required by vuesax?

I want to use vuesax on my first project and I fell in love with vuesax components. I am actually using Vue cli 2.
Which version of Vue is required by vuesax?
vuesax 3.x and 4.x depend on Vue 2.
So vuesax projects need the latest version of Vue 2 in your project (currently 2.6.14):
npm i -S vue#2

html5audio plugin in CKEditor 4 in vue

I am trying to add the html5audio plugin in my ckeditor 4 in vue but everytime I am getting html5audio are not found ..... I have two questions. First of all, can html5audio plugin be installed in ** "ckeditor4-vue": "^1.0.1"**. Second one, is there any plugin where I can add html5 audio link in my vue project?

PhpStorm Vuetify autocomplete

I'm having trouble trying to get the autocomplete of vuetify components. v-card for example.
I'm running PhpStorm 2018.2.4 on Windows 10. I have the Vue.js plugin installed.
It can be related to Vuetify version being used; the way components are defined has been changed in 1.1+, and this new format is not yet supported (WEB-32886). Please follow this ticket for updates.
See https://github.com/vuetifyjs/vuetify/issues/4590#issuecomment-414300395 for possible workaround

Would it be possible to use JQuery Bootstrap framework along with Aurelia?

Would it be possible to use jQuery Bootstrap with Aurelia? There are some toggle buttons and other components I would like to use that come with Bootstrap.
So far, all of the examples I have seen are using jQuery UI along with Aurelia.
Take a look at the skeleton-navigation project. It uses bootstrap by default:
https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-es2016
The magic happens here
https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-es2016/src/main.js#L1
import 'bootstrap';
Note that bootstrap is installed via JSPM.