Using webjars with Javalin and Vue

Question

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.

Answer 1

It's not completely the answer of my original question (using webjars), but solves the problem so simply I accept as a workaround.

"add bootstrap-vue via CDN by adding (for example) https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js as a 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 Hello, world! inside your components."

Answer 2

i've been working with vue and Javalin for a short time, but i finally got that, when you are working Vue with a Javalin server you are under the rules of ES6, so to import a module under a .js extension you need indicate that you are working with modules, something like <script type="module">//Imports and code</script>. Now, if you need to import from a .vue file, then you could use http-vue-loader, you can get the maven dependency here: https://mvnrepository.com/artifact/org.webjars.npm/http-vue-loader, you only have to replace the import { component } from 'module' with 'name of component':httpVueLoader('module route'). A little example that works for me importing from a js file:

<script type="module">
  import BarExample from '/componentsjs/BarExample.js'
  import LineExample from '/componentsjs/LineExample.js'
    Vue.component("charts-page", {
        template: "#charts-page",
        components: {
              BarExample,
              LineExample,
            },
            data: () => ({
                dataPoints: null,
                height: 20,
                labelsBar: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                dataBar: [40, 20, 12, 39, 11, 40, 39, 80, 40, 20, 12, 11]
              }
            ),
    });
</script>

And an example for importing by .vue files:

<script type="module">
Vue.component("main-component-page", {
    template: "#main-component-page",
    components: {
        'app-header': httpVueLoader('/component/header.vue'),
        'app-ninjas': httpVueLoader('/component/ninjas.vue'),
        'app-footer': httpVueLoader('/component/footer.vue')
    },
});
</script>