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.
Related
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
I have developed a Vue 2.6 SPA using Vuetify and Material Design Icons that is included as described here, but some elements of the SPA (partially derived by a public template) use also "Material Design Iconic Font". I would like to host locally the "zmdi" icons, instead of using CDN, and following the instructions reported here I installed this additional icon pack using:
npm install material-design-iconic-font
I don't know how to correctly include "zmdi" icons into the VUE app.
Could anyone suggest the easiest way to host Material Design Iconic Font within the VUE SPA?
I finally solved using
import "material-design-iconic-font/dist/css/material-design-iconic-font.css";
into "main.js".
I have to include something else into "vue.config.js" to instruct webpack to correctly handle this css file?
Has anyone used VUETIFY with this tool vue-sfc-rollup?
https://www.npmjs.com/package/vue-sfc-rollup
I need to add VUETIFY to the project that tool created, but using the VUE CLI command VUE ADD VUETIFY will not work due to the fact that the rollup solution is not a complete vuejs application, but a compact solution for creating distributed components. The problem I am trying to solve is where do I add the vuetify specific code?
I have a website based on Vue framework and webpack.
I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.
There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.
So, is there a way use the Material Components Web with the Vue framework?
I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.
Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework
You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.
Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.
Also there is "root" package - material-components-web, which just references all other packages.
By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.
Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.
I am pretty new to SPA. I'd like to known if it is possible to build a SPA with only Bootstrap or I have to use a framework like Jquery mobile or angular ?
Thanks
Bootstrap is CSS, HTML and JavaScript Framework which contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
To Build a SPA application you have to use JavaScript libraries or Frameworks.
From http://tutorialzine.com/2015/02/single-page-app-without-a-framework/ you can get an idea of SPA without javascript frameworks.
There are a lot of open source JavaScript frameworks that help with building SPA, such as:
Angular
React
Ember
Aurelia
Vue.js
Cycle.js
Backbone
You have to use JS framework.
Bootstrap is only CSS framework. It makes your application looks better. Ok, you can use custom datepickers, modals etc, but usually this functionalities are implemented in CSS frameworks like Boostrap by jQuery. You can check this page to confirm it. You need JS framework for SPA (or create a new one).