Http-vue-loader dependency and .vue file problem

Technical Discussion
1

I was looking at the js libraries added in the qapps.xml and vapps.xml files and I saw that there is one called http-vue-loader. I looked it up and found that it was changed to vue3-sfc-loader.

Should we use vue3-sfc-loader instead of http-vue-loader, or should we use something like petite-vue which is maintined by the vuejs project.

I’m not entirely sure how http-vue-loader is used, but I’m running into problems with using a single file vue component as demonstrated in the example componenrt. The main problem is that the vue file isn’t rendering the count number properly (see image below).

image
image870×271 25.5 KB

Where the screen’s code is:

<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-3.xsd"
        default-menu-title="Dynamic Items Vue" default-menu-index="10" render-modes="vuet,qvt">
    <widgets>
        <render-mode><text type="vuet,qvt" location="component://PopRestStore/screen/store/storefront-ui/packages/vue/src/components/atoms/SfButton/SfButton.vue"/></render-mode>
    </widgets>
</screen>

And component://PopRestStore/screen/store/storefront-ui/packages/vue/src/components/atoms/SfButton/SfButton.vue contains the following:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
2

The vue3-sfc-loader looks good for future reference, though I don’t see a point in using it right away… perhaps along with other changes for Vue 3… yet another big update over the last 2-4 years that is not backward compatible in many ways… there have been so many of those it’s tough to keep up (like the Java, Jetty, Gradle, Spock, JUnit, etc updates that all have backward compatibility issues).

For reference there are a few differences from the stock version of http-vue-loader to support parsing of .vue files that are plain strings, without this the library had to do the HTTP request itself:

for differences from stock http-vue-loader see: Comparing FranckFreiburger:master...jonesde:master · FranckFreiburger/http-vue-loader · GitHub

I believe the issue with your file is the use of export default = {} and instead under the script element use module.exports = {}. The .vue (or .qvue) file loader is somewhat limited in the JS styles it uses, and because there is no transpile step like with a Node JS based build you have to stick to common browser supported JavaScript code.

For an example see the ActiveOrgNav.qvue file (in SimpleScreens).

1 Like