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.

score 1 · Answer 1 · answered Oct 11 '20 at 15:54

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/bootstrap-vue@2.0.0-rc.11/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."

Angel Rodriguez · Answer 2 · 2020-12-21T02:11:53.407

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>

Using webjars with Javalin and Vue

2 Answers2