Javalin: Using bootstrap-vue (or other webjars) with javalin

[balage1551]

I am aware that Javalin supports Vue and I use it without problems. It is easy to set up, I only had to call the config.enableWebjars() and using Vue is quite out of box and simple.
However, I would like to use other tools, which are not deeply integrated with Javalin. Namely I would like to use bootstrap-vue for high level components. Normally, when I use it through npm and manual configuration, it is also straightforward to add the support to Vue:

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)

However, this is not straightly translatable to Javalin Vue support, because if I add the above lines to the top level layout.html:

<script>
    import { BootstrapVue } from 'bootstrap-vue'

    var vue = new Vue({el: "#main-vue"});
    Vue.filter("numFormat", function(value) {
        if (value == undefined) return ""
        else return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    });
    Vue.config.devtools = true
    Vue.use(BootstrapVue)

</script>

I'll get an error: Uncaught SyntaxError: import declarations may only appear at top level of a module.

I am sure I missed the point, so I would greatly appreciate any help, how to do it.

[tipsy]

@balage1551 add bootstrap-vue via CDN by adding (for example) https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js as a <script> tag to your layout.html. Once you have done this, all of the bootstrap vue components are automatically imported, and you can use them like <b-alert show>Hello, world!</b-alert> inside your components.

[balage1551]

Wow!
Thanks it was even easier than I thought!