Vue SFC template generating build errors

Total newbie with Vue.js. I'm following a tutorial produced by the team over at Kirby CMS.

Vue is building using [email protected], as part of the KirbyUp bundler.

So, I can get the code shown below in the tutorial to build successfully and render as expected into the browser.

<template>
  <k-field class="k-doi-field" :label="label">
    <k-input theme="field" type="text" name="textfield" :value="value" @input="onInput" />
  </k-field>
</template> 

<script>
    export default {
      props: {
        label: String,
        value: String
      }
    }
</script>

<style>

</style>

I get build errors the moment I do anything else with the template. Add a lang="html" to the template tag? Build error. Add a H2 inside the template? Build error.

The build error is helpfully " ERROR Build failed "

Image: A list of build errors

Would somebody be so kind as to illuminate what's going on here..?

Code samples which have caused the build error:

<template lang="html">
  <k-field class="k-doi-field" :label="label">
    <k-input theme="field" type="text" name="textfield" :value="value" @input="onInput" />
  </k-field>
</template> 

<script>
    export default {
      props: {
        label: String,
        value: String
      }
    }
</script>

<style>

</style>

<template>
  <h2>Test</h2>
  <k-field class="k-doi-field" :label="label">
    <k-input theme="field" type="text" name="textfield" :value="value" @input="onInput" />
  </k-field>
</template> 

<script>
    export default {
      props: {
        label: String,
        value: String
      }
    }
</script>

<style>

</style>

Solution

kirbyup uses Vue 2, it seems to not explicitly state this but this is something that can be expected from a project that was started several years ago.

Both changes that you did to a template are potentially not supported. A template cannot have multiple roots in Vue 2, meaning that h2 and k-field should to be wrapped with another element to make it work.

lang="html" is redundant and doesn't serve a good purpose. It may not supported depending on a tool, which is the case here. lang is de facto supported by loaders but it was mentioned in the SFC specification only since Vue 3.

If the intention is to use Vue 3, the support was added in 4.x. It's currently in alpha, which you need to be aware of, it's accessible under next tag:

npx kirbyup@next ...